Skip to content Skip to sidebar Skip to footer

How To Dynamically Add An New Input Field On "keydown" Using Jquery?

I want to have a new input field dynamically generated whenever I type on the last input field in the form. This is my HTML codes

Solution 1:

Not sure but you might like something like this:

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><title>Untitled Document</title><scripttype="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><scripttype="text/javascript">

 $txt=newArray();

 $(function(){

     $('#go').on('click',function(){

         console.log($('form').serialize());

         })
     $('body').on('keydown','.last',function(){

         $('.last').removeClass('last');

         $('#go','body').before('</br><input class="last" type="text" name="text'+(Number($(this).attr('name').match(/[0-9]+/g))+1)+'" value="'+(Number($(this).attr('name').match(/[0-9]+/g))+1)+'"></br>');
         })
     })

</script></head><body><form><inputclass="last"type="text"name='text1'value="no text"><inputid="go"name=""type="button" /></form></body></html>

EDITS: I added a <form> for you, and some codes to see what data we are sending when the button is clicked. See the result is your browser console. i.e: firebug or others shortcut key usually: (F12)

Test it here: http://jsfiddle.net/3jLbm9sp/1/

Post a Comment for "How To Dynamically Add An New Input Field On "keydown" Using Jquery?"