1

次のコードを使用して、必要な数のテキスト ボックスを追加できます。

<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つのテキストボックスを追加し、それらのテキストボックスに何かを書き込んでいて、ユーザーがもう一度「テキストボックスの追加」ボタンをクリックすると、ユーザーがテキストボックスに挿入したデータ消えます。

4

5 に答える 5

3

innerHTML はユーザー入力を保持していません。innerHTML を使用するのではなく、入力を新しい要素として作成し、appendChild を使用してその要素をコンテナーに追加する必要があります。

これにより、他の入力要素を innerHTML の呼び出しに置き換えるのではなく、そのまま残します。

于 2012-05-04T06:09:47.173 に答える
0

問題を簡単に解決するにはjQueryを使用してください

$('#container').append('<input type="text"  ');
于 2012-05-04T06:15:47.060 に答える
0

次のようにボタン名を変更します。

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

それ以外の

<input type="button" onClick="AddTextbox();" value="add" />
于 2012-07-16T19:43:41.850 に答える
0

前に参照した jQuery があるため、container.innerHTML を設定するのではなく、次のようにします。

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

于 2012-05-04T06:10:45.407 に答える
0

innerHTML を使用する代わりに、jQuery.append を使用できます。

ここでフィドルを確認してください

于 2012-05-04T06:12:22.253 に答える