Showing 2 text boxes when button click JS

Question

I have implemented a coding to show a text-box when the user clicks a button. I need to modify that coding to view 2 text-boxes when user clicks that same button. I'll put the coding down below. Thanks!

  <div class="form-group">
    <div class="col-sm-9">
  <div id="welcomeDiv"  class="answer_list" style="display:none;">  <input type="text" /></div>

  <input type="button" name="answer" value="Customize Size" onclick="showDiv()" />

</div>

function showDiv(){
      $( "#welcomeDiv" ).show( "slow" );
}

This isn't PHP, it's javascript. Anyway, the solution is to change your div id to a class and assign that class to both divs — miknik
– miknik, Commented Sep 27, 2017 at 0:11

emjr · Accepted Answer · 2017-09-27 00:17:58Z

1

Try this one .

 <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
     $("#input1").hide();
             $("#input2").hide();
        $("#hide").click(function(){
            $("#input1").hide();
             $("#input2").hide();
        });
        $("#show").click(function(){
            $("#input1").show();
             $("#input2").show();
        });
    });
    </script>
    </head>
    <body>

    <input type="text" id="input1"/>
    <input type="text" id="input2"/>

    <button id="hide">Hide</button>
    <button id="show">Show</button>

    </body>
    </html>

Hope this help :)

answered Sep 27, 2017 at 0:17

emjr

2321 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Munkhdelger Tumenbayar · Accepted Answer · 2017-09-27 02:04:41Z

0

this is exactly same like your code check this out this is fiddle link and with code snippet also

 <div class="form-group">
    <div class="col-sm-9">
  <div id="welcomeDiv"  class="answer_list">  <input type="text" /></div>
  <input type="button" name="answer" value="Customize Size" />
</div>

this is javascript little bit different but you will get it

$("input[type='button']").click(function(){
      $("#welcomeDiv").show('slow');
});

i dont like to give style in elements so use css.css

#welcomeDiv{
  display:none;
}

$("input[type='button']").click(function(){
      $("#welcomeDiv").show('slow');
});

#welcomeDiv{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <div class="col-sm-9">
  <div id="welcomeDiv"  class="answer_list">  <input type="text" /></div>
  <input type="button" name="answer" value="Customize Size" />

</div>

answered Sep 27, 2017 at 2:04

Munkhdelger Tumenbayar

1,90421 silver badges31 bronze badges

1 Comment

Munkhdelger Tumenbayar Over a year ago

Maybe you need click to hide so let me know i will try to help you

Collectives™ on Stack Overflow

Showing 2 text boxes when button click JS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related