2012-05-04 99 views
1

只要你想通過顯示使用下面的代碼消失在動態添加文本框的文本使用JavaScript

<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script> 
<script type="text/javascript"> 
var i=2; 
function AddTextbox(){ 
container.innerHTML=container.innerHTML+'<input type="text" name="'+ i + '" id="'+ i + '">' + '</br>'; 
i++; 
} 
</script> 

</head> 
<body> 
<form action="next.php" method="post" > 
<input type="text" name="1" id="1" /> 
<input type="button" onClick="AddTextbox();" value="add" /> 
<input type="submit" value="submit" /> 
<div id="container"></div> 
</form> 
</body> 
</html> 

是我得到的是,如果用戶已添加的唯一問題您可以添加儘可能多的文本框2個文本框,並且還在這些文本框中寫入了一些內容,並且用戶再次點擊「添加文本框」按鈕,然後用戶插入到文本框中的數據消失。

回答

3

innerHTML不保留用戶輸入。您應該將輸入創建爲新元素,並使用appendChild將元素附加到容器中,而不是使用innerHTML。

這會使其他輸入元素保持原樣,而不是通過調用innerHTML來替換它們。

0

,而不是設置container.innerHTML,因爲你已經得到了jQuery的前面所提到,這樣做:

$(container).append('<input type="text" ...etc...

0

而不是使用的innerHTML,你可以使用jQuery.append

檢查Fiddle這裏

0

使用jQuery更容易解決問題

$('#container').append('<input type="text" '); 
0

更改按鈕名稱,如如下:

<input type="submit2" onClick="AddTextbox();" value="add" /> 

,而不是

<input type="button" onClick="AddTextbox();" value="add" />