CODEWITHSUNDEEP
javascriptjquery
Mr A
Mr A

Reputation: 6768

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

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

Upvotes: 1

Views: 18033

Answers (7)

Pronay Sharma
Pronay Sharma

Reputation: 98

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.

Upvotes: 1

Nathan
Nathan

Reputation: 11149

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" />

Upvotes: 1

deepi
deepi

Reputation: 1081

try this:

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

Upvotes: 2

adamwtiko
adamwtiko

Reputation: 2905

Here's an example using toggle:

http://jsfiddle.net/x5qYz/

Upvotes: 2

Alex
Alex

Reputation: 7374

$(function()
{

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

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

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

    });

});

Upvotes: 1

Gjorgji Tashkovski
Gjorgji Tashkovski

Reputation: 1983

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

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

Upvotes: 1

Talha Ahmed Khan
Talha Ahmed Khan

Reputation: 15453

You can use toggle instead;

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

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

Upvotes: 3

Related Questions