Using Jquery to hide/unhide the textbox if button is clicked

Question

I have input button , what I want is if a user clicks on the button then textbox should appear.

Below is the code which is not working :

<input type="submit" value="Add Second Driver" id="driver" />
                    <input type="text" id="text" />

$("#driver").click(function() {

    $('#text').show();

  }
 });

Also the textbox should not be visible initially

Talha Ahmed Khan · Accepted Answer · 2011-06-29 10:34:02Z

3

You can use toggle instead;

$('#text').toggle();

With no parameters, the .toggle() method simply toggles the visibility of elements

answered Jun 29, 2011 at 10:34

Talha Ahmed Khan

15.6k10 gold badges46 silver badges49 bronze badges

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

Comments

deepi · Accepted Answer · 2011-06-29 10:39:14Z

2

try this:

$(document).ready(function(){
    $("#driver").click(function(){
       $("#text").slideToggle("slow");
  });
});

answered Jun 29, 2011 at 10:39

deepi

1,08110 silver badges18 bronze badges

1 Comment

deepi Over a year ago

give both of them in one 'div' and do slidetoggle for that 'div' instead of 'textbox'

adamwtiko · Accepted Answer · 2011-06-29 10:37:38Z

2

Here's an example using toggle:

http://jsfiddle.net/x5qYz/

answered Jun 29, 2011 at 10:37

adamwtiko

2,9059 gold badges40 silver badges48 bronze badges

Comments

Gjorgji Tashkovski · Accepted Answer · 2011-06-29 10:35:47Z

1

<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" style="display:none;" />

$("#driver").click(function() {
    $('#text').css('display', 'block');
});

answered Jun 29, 2011 at 10:35

Gjorgji Tashkovski

2,0031 gold badge14 silver badges14 bronze badges

Comments

Alex · Accepted Answer · 2011-06-29 10:36:38Z

1

$(function()
{

    // Initially hide the text box
    $("#text").hide();

    $("#driver").click(function()
    {

         $("#text").toggle();
         return false; // We don't want to submit anything here!

    });

});

answered Jun 29, 2011 at 10:36

Alex

7,3461 gold badge21 silver badges31 bronze badges

Comments

Nathan · Accepted Answer · 2011-06-29 10:43:58Z

1

Try this:

<script type="text/javascript">
jQuery(function ($) {
    $('#driver').click(function (event) {
        event.preventDefault(); // prevent the form from submitting
        $('#text').show();
    });
});
</script>
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />

answered Jun 29, 2011 at 10:43

Nathan

11.2k4 gold badges41 silver badges50 bronze badges

2 Comments

Mr A Over a year ago

can I show the textbox and label in a slow motion .. and yeh i dont want the form to be submit .

Nathan Over a year ago

Yes. Just change the .show() to .show('slow'). Instead of the default show effect you can use fadeIn or slideDown.

Musakkhir Sayyed · Accepted Answer · 2016-05-30 07:43:59Z

1

Make the textbox hidden when the page loads initially like this

Code:

$(document).ready(function () {
$('#text').hidden();
 });

Then your should work the way you want.

edited May 30, 2016 at 7:43

Musakkhir Sayyed

7,21813 gold badges44 silver badges67 bronze badges

answered Jun 29, 2011 at 10:40

Pronay Sharma

981 gold badge1 silver badge6 bronze badges

Collectives™ on Stack Overflow

Using Jquery to hide/unhide the textbox if button is clicked

7 Answers 7

Comments

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related