如何使用jQuery在“keydown”上动态添加新的输入字段？
问题描述：
我想要在表单中输入最后一个input field时动态生成新的input field。如何使用jQuery在“keydown”上动态添加新的输入字段？
这是我HTML代码
<form method = "POST" action="test2.php" >
<input type="text" name='text1'>
所以，当我input文字在上面的input field，新input field应该动态地生成。
例如。
<input type="text" name='text2'>
，如果我再在新生成的input field，input文本的新field应后马上产生，以及，我想这些输入之间的差距</br>。
</br><input type="text" name='text3'>
贝娄的inputs，应该有一个submitbutton。当我点击这个button时，应该使用Ajax和PHP将整个form（包括所有动态生成的input fields）发送到数据库。
<input type="submit" value="submit">
</form>
不知道，但你可能会喜欢这样的事情：
<!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：我加了<form>你，有些代码看到的是单击按钮时我们发送什么数据。看到结果就是你的浏览器console。即：萤火虫或其他通常快捷键（F12）
答
不知道，但你可能会喜欢这样的事情：
<!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：我加了<form>你，有些代码看到的是单击按钮时我们发送什么数据。看到结果就是你的浏览器console。即：萤火虫或其他通常快捷键（F12）
我想你问的是： 用户完成一个项目。字段名称会加1，然后出现下一个
sry如果你不明白，是的，就像Len_D说，你有按钮保存太多，但我不明白如何重复使用JavaScript。 – Blackarch 2014-10-06 13:15:10
回答
不知道，但你可能会喜欢这样的事情：
EDITS：我加了
<form>你，有些代码看到的是单击按钮时我们发送什么数据。看到结果就是你的浏览器console。即：萤火虫或其他通常快捷键（F12）测试在这里：http://jsfiddle.net/3jLbm9sp/1/
查看小提琴：http://jsfiddle.net/3jLbm9sp/1/ – ErickBest 2014-10-06 13:05:10
太棒了，享受编程。 – ErickBest 2014-10-06 13:19:56
sry再次问你，当我把按钮放下来，并为测试回显text1-text3，为什么只有text1出现？另一个未定义的索引：text2-text3？ – Blackarch 2014-10-06 13:31:42
相关问题