ボタンをクリックするとフォームに新しいエントリを作成するために、以下のjqueryコードを使用しています。
<script type="text/javascript">
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
$('#input' + num).after(newElem);
$('#btnDel').attr('disabled','');
if (newNum == 3)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length;
$('#input' + num).remove();
$('#btnAdd').attr('disabled','');
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});
$('#btnDel').attr('disabled','disabled');
});
</script>
私のhtmlコードは
<form id="entry" method="post" action="collect.php">
<div id="input1" style="border: solid 2px #000; width: 80%; margin-bottom:4px;" class="clonedInput">
<table>
<tr>
<td><img src="arrow.gif"/></td>
<td>
<table>
<tr>
<td><b>I/P: </b></td>
<td><input type="text" name="ipname" id="name1" /></td>
<td><b>Console I/P: </b></td>
<td><input type="text" name="consolename" id="name1" /></td>
<td><b>Console Port: </b></td>
<td><input type="text" name="portname" id="name1" /></td>
<td><b>Rack Number: </b></td>
<td><input type="text" name="rackname" id="name1" /></td>
</tr>
<tr>
<td><b>Serial Number: </b></td>
<td><input type="text" name="serialname" id="name1" /></td>
<td><b>Login Machine: (must get dropdown from db)</b></td>
<td><select name="logmacname">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select></td>
<td><b>Machine Username: </b></td>
<td><select name="usermac" >
<option value="">Select:</option>
<option value="cisco">cisco</option>
<option value="lab">lab</option>
</select></td>
<td><b>Machine Password: </b></td>
<td><select name="macpass" >
<option value="">Select:</option>
<option value="cisco">cisco</option>
<option value="lab">lab</option>
</select></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div>
<input type="button" id="btnAdd" value="add another entry" />
<input type="button" id="btnDel" value="remove entry" />
</div>
<input type="submit" value="Click to submit!">
</form>
このフォームをcollect.php
db ストレージ用に送信する必要があります。関数を使用してフォームの値にアクセスし、関数を$_POST
使用isset()
してチェックできることはわかっていますが、フォームから各エントリにアクセスして使用するにはどうすればよいですか。私の div だけが新しい名前で更新されていますが、入力フィールドは同じ名前です。誰かがこの問題を乗り越えるのを手伝ってくれますか?