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 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$txt=new Array();
$(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>
<input class="last" type="text" name='text1' value="no text">
<input id="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?"