How to get element index in dynamic form
Hi I try to make a dynamic form with inputs depended on selects fields. My method works in static form but I don't know how to use it in dynamic one.
JSON function ( to control correct input with select)
- $(document).ready(function() {
$('select.sf').change(function() {
var z = $("select.sf").index(this);
$.getJSON('ajax.php', {option: $(this).val()}, function(data) {
$("[name^=jed]").eq(z).val(data.inputValue);
alert(z);
});
});
});
I think that problem can be here because it works only for first row which is created in static way
Rest of form code (could have some mistakes because i change some names to English for needs of this post)
- </script>
<script type="text/javascript">
$(document).ready(function(){
var i = 2;
var RowModel = jQuery.format($("#Model").val());
function addRow() {
var ii = i++;
$(RowModel(ii)).appendTo("#tab tbody");
$("#delete_" + ii).click(function(){
$("#row_" + ii).remove();
});
}
$("#add").click(addRow);
});
</script>
<!------------------------------------------------------------------------------------------------------------->
</head>
<body>
- <!----------------------------Some code ----------------------------------------------->
<!-- Model of a row in table------------------------------------------------------ -->
<textarea id="Model" style="display:none;" cols="1" rows="1">
<tr id="row_{0}">
<td>{0}.</td>
<td>
<select name="symbol[]" class="sf" >
<!----------------------------Some code ----------------------------------------------->
</select>
</td>
<td><input type="text" name="ilosc[]" maxlength="5" onKeyPress="return dec(event,'cos');"></td>
<td><input type="text" name="jed[]" style="width:300px" readonly="readonly"></td>
<td>
<select name="kolor[]">
<!----------------------------Some code ----------------------------------------------->
</select>
</td>
<td><img src="grafika/m.jpg" id="usun_{0}" alt="usun"></td>
</tr>
</textarea>
<!--End of Model----------------------------------------------------------------- -->
<!----------------------------Some code ----------------------------------------------->
<form action= "?page=koordynacja/zamw3" method="POST" name="formularz">
<table id="tab">
<thead>
<tr>
<th>Lp</th>
<th>Symbol</th>
<th>Ilość</th>
<th>Jednostka</th>
<th>Kolor</th>
<th>+/-</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="6">
<input type="submit" name="wyslij" value="Wyślij">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1.</td>
<td>
<select name="symbol[]" class="sf" onchange="licz">
<!----------------------------Some code ----------------------------------------------->
</select>
</td>
<td><input type="text" name="ilosc[]" maxlength="5" onKeyPress="return dec(event,'cos');"></td>
<td><input type="text" name="jed[]" style="width:300px" readonly="readonly"></td>
<td> <select name="kolor[]">
<!----------------------------Some code ----------------------------------------------->
</optgroup>
</select>
</td>
<td><img src="grafika/p.jpg" id="dodaj" alt="dodaj"></td>
</tr>
</tbody>
</table>
<!----------------------------Some code ----------------------------------------------->
</form>
Is there any way to get this indexes or any other method to control this input fields ? Thanks in advance