Question

每当我在表单中的最后一个input field上键入时，我希望动态生成新的input field。

这是我的 HTML 代码

<form method = "POST" action="test2.php" >

<input type="text" name='text1'>

因此，当上面input中的input field文字时，应动态生成新的input field。

例如。

<input type="text" name='text2'>

如果我在新生成的input中再次发送input field文字，则应在其后立即生成新的field，我希望这些之间存在</br>的差距输入。

</br><input type="text" name='text3'>

与inputs吻然，应该有一个submit button。当我点击此button时，应使用form和input fields将整个Ajax（包括所有动态生成的PHP）发送到数据库。

<input type="submit" value="submit">

</form>

Answer 1

不确定，但您可能喜欢这样的事情：

    <!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>

编辑：我为您添加了<form>，还有一些代码可以查看我们在点击按钮时发送的数据。查看结果是您的浏览器console。即：萤火虫或其他快捷键通常：（F12）

在此测试：http://jsfiddle.net/3jLbm9sp/1/

如何在＆＃34; keydown＆＃34;上动态添加新的输入字段使用jQuery？

1 个答案: