如何动态地添加一个新的输入字段＆QUOT; KEYDOWN＆QUOT;使用jQuery？ [英] how to dynamically add an new input field on "keydown" using jQuery?
问题描述
我想有一个新的输入字段动态每当我在表单中输入的最后一个输入字段生成
这是我的 HTML codeS
＆LT;形式方法=POST行动=test2.php＆GT;
＆LT;输入类型=文本名称='文本1'＆GT;
所以，当我在输入字段上面，一个新的输入字段应该动态地生成。 输入正文
例如。
＆LT;输入类型=文本名称='文本2'＆GT;
如果我输入再次文本在新生成的输入字段，新现场应之后它产生的，以及，我希望有一个＆LT; / BR＆GT; 这些投入差距
＆LT; / BR＆GT;＆LT;输入类型=文本名称='文本3'＆GT;
娄输入，应该有一个提交 按钮。当我点击这个按钮的整个表格（包括所有动态生成的输入域）应该使用阿贾克斯和 PHP 发送到数据库中。
＆LT;输入类型=提交值=提交＆GT;
＆LT; /形式GT;
不知道，但你可能会喜欢这样的：
＆LT;！DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0过渡// ENhttp://www.w3.org/TR/xhtml1/DTD/ XHTML1-transitional.dtd＆GT;
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT; HEAD＆GT;
＆LT; META HTTP-当量=Content-Type的CONTENT =text / html的;字符集= UTF-8/＆GT;
＆LT;冠军＆GT;无标题文档＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =// ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
＆LT;脚本类型=文/ JavaScript的＆GT;
$ TXT =新的Array（）;
$（函数（）{
$（'＃去'）。在（'点击'，函数（）{
的console.log（$（'表'）序列化（））;
}）
$（'身体'）。在（'的keydown'，'最后'，函数（）{
$（'最后'）removeClass移除（'最后'）。
$（'＃去，体）前（'＆LT; / BR＆GT;＆LT;输入级=最后一个类型=文本名称=文本。+（编号（$（本）.attr（'名）。比赛（/ [0-9] + / G））+ 1）+'值=+（编号（$（本）.attr（名称）。比赛（/ [0-9 〕+ /克））+ 1）+'＆GT;＆所述; / BR＆GT;'）;
}）
}）
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;形式GT;
＆LT;输入级=最后一个类型=文本名称='文本1'值=没有文字＆GT;
＆LT;输入ID =走出去NAME =类型=按钮/＆GT;
＆LT; /形式GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
编辑：我添加了一个＆LT;形式GT; 的你，有的codeS，看看什么样的数据，我们正在发送时，点击按钮。看到的结果是你的浏览器控制台。即：萤火虫或其他人的快捷键通常是：（F12）的
测试在这里： http://jsfiddle.net/3jLbm9sp/1/
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
<form method = "POST" action="test2.php" >
<input type="text" name='text1'>
so when i input text in the input field above, a new input field should dynamically be generated.
For example.
<input type="text" name='text2'>
and if I input text again in the newly generated input field, a new field should be generated right after it as well, I want a </br> gap between these inputs.
</br><input type="text" name='text3'>
Bellow the inputs, there should be a submit button. When I click this button the entire form (including all the dynamically generated input fields) should be sent to the database using Ajax and PHP.
<input type="submit" value="submit">
</form>
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/
这篇关于如何动态地添加一个新的输入字段＆QUOT; KEYDOWN＆QUOT;使用jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
