Show next input after typing in the first input using JQuery

Look @ following code 

1.HTML Code

Fname:<input type="text" id="1" /><br>
Mname:<input type="text" id="2" /><br>
Lname:<input type="text" id="3" /><br>
Education:<input type="text" id="4" /><br>
Age:<input type="text" id="5" /><br>
Hobby:<input type="text" id="6" /><br>
PutLast:<input type="text" id="7" /><br>

2. Javascript 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
               $('#2, #3, #4, #5 , #6, #7').hide();
                 $("input").keyup(function () {
                       var value = $(this).val();
                       var id = parseInt($(this).attr('id'));
                       var nextid = '#' + (id + 1);
                if (value != "")
                         $(nextid).show();
                else     $(nextid).hide();
               });
});
</script>

3.CSS
<style>
P { color: blue; margin : 8 px;}
.hide { display:none; }
</style>

that`s it.... from my side Thank you  

or got thr` dis URL http://jsfiddle.net/L7ebh/71/

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s