如何使用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>

來源

2014-10-06 Blackarch

我想你問的是：用戶完成一個項目。字段名稱會加1，然後出現下一個。這一直持續到用戶停止輸入。你怎麼知道他們何時停止。會不會有提交按鈕？ – 2014-10-06 12:48:28

sry如果你不明白，是的，就像Len_D說，你有按鈕保存太多，但我不明白如何重複使用JavaScript。 – Blackarch 2014-10-06 13:15:10

不知道，但你可能會喜歡這樣的事情：

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

測試在這裏：http://jsfiddle.net/3jLbm9sp/1/

來源

2014-10-06 13:01:45 ErickBest

查看小提琴：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

如何使用jQuery在「keydown」上動態添加新的輸入字段？

回答

相關問題