如何使用jQuery在“ keydown”上动态添加新的输入字段? - javascript

            
        

    

我想在表单中的最后一个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时,应使用forminput fields将整个Ajax(包括所有动态生成的PHP)发送到数据库。

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

编辑:我为您添加了一个<form>,以及一些代码,以查看单击按钮时我们正在发送的数据。查看结果是您的浏览器console。即:萤火虫或其他快捷键通常:(F12)

在此处进行测试:http://jsfiddle.net/3jLbm9sp/1/

保留文本区域的数据或值,然后选择输入 - javascript

通过$ _POST提交表单时,输入文件值仍然保留。像这样: if($_POST){ $error = false; if(!$post['price']){ $error = true; $error_note['price'] = "*Should not be empty"; } if($err…

包含“。”的onClick函数参数 - javascript

我正在尝试创建一个表,该表包含该表的“更改密码”列中各项的onClick函数,以便我的系统管理员可以更改每个人的密码。每个onClick都会调用函数“ ChangePassOpen”,该函数将打开一个带有新密码输入框和另一个按钮的模式,以实际调用该函数来更改密码。为了使我的程序能够识别管理员正在更改的帐户,我需要将用户名作为参数传递,但是我的用户名包含“。”…

尽管刷新,jQuery格式仍未应用于Ajax数据 - javascript

我正在通过GET响应消息从服务器(php文件)的可折叠内部加载列表视图。但是,尽管刷新了jQuery元素,但jQuery格式并未应用于添加的HTML。我的页面在这里:http://i.cs.hku.hk/~hsbashir/Project_Work/events/events.htmlHTML代码(仅相关代码)<script> lastRecor…

JavaScript处理期间数组内部的数组 - javascript

我正在尝试使用Ajax处理表单,并且在处理复选框时遇到了问题。我以为我可以在数组中做一个数组,将选中的框添加到数据对象中,但这似乎不起作用。它不会显示为控制台中对象的一部分或类似内容。我尝试了一些变化,但没有任何效果。这是当前的样子:var formData = { 'fname' : $('input[name=fname]&…

使用php重新加载内容 - javascript

在对网站进行编程时,我以前使用过此代码,它可以完美工作,但是现在当我想使用一些Flash部件时,每次单击链接时,它都会重新加载所有网站。源代码: <!DOCTYPE html> <html> <head> <title>Hot King Staff</title> <meta charset=…