Post form not working with jquery fields - php

Question

i cant get the form to post the variables to another script using dynamic fields?
edit: the script creates a new row of input fields, but none of them manage to post variables to a php script.
jquery:
<script type="text/javascript">
$(function(){
var newRowNum = 2;
$('#addnew').click(function(){
// increment the counter
newRowNum += 1;
var addRow = $(this).parent().parent();
var newRow = addRow.clone();
$('input', addRow).val($(this).val());
$('name', addRow).val('os' + newRowNum);
$('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');
$('input', newRow).each(function(i){
var newID = 'os' + newRowNum + i;
$(this).attr('id',newID).attr('name',newID);
});
addRow.before(newRow);
$('a.remove', newRow).click(function(){
$(this).parent().parent().remove();
return false;
});
return false;
});
});
html:
<tr>
<td>
<input name="os21" type="text" id="os21" value="" size="24" maxlength="60" /></td>
<td>
<input name="os22" type="text" id="os22" value="" size="24" maxlength="60" /></td>
<td>
<input name="os23" type="text" id="os23" value="" size="10" maxlength="60" /></td>
<td><a id="addnew" href="">Add +</a></td>
</tr>
<tr><td colspan="3" align="left" style="text-align: right; padding-top: 10px;">
<input type="submit" value="Update">
</td></tr>

Answer 1

<script language="text/javascript">
function postMyForm()
{
$.ajax({
url: "url from your file to post to",
data: $('#myForm').serialize(),
type: 'post',
success: function(data) {
// do stuff when request is done
}
});
}
function AddNewRule() {
// get last ID
// convert to a int to count with it
var LastID = parseInt( $('#myTable tr:last td input').attr('id').replace(/os/gi, '') );
// add 1 to get next ID
LastID += 1; // OR LastID = LastID + 1; what you wanna use
// create new rule and set the next ID
var newRule = $('<tr><td><input name="os'+ LastID +'" type="text" id="os'+ LastID +'" value="" size="10" maxlength="60" /></td></tr>');
// append / insert at the end of your table
$('#myTable').append(newRule);
}
</script>
<form id="myForm">
<table id="myTable">
<tr>
<td>
<input name="os21" type="text" id="os21" value="" size="24" maxlength="60" />
</td>
</tr>
<tr>
<td>
<input name="os22" type="text" id="os22" value="" size="24" maxlength="60" />
</td>
</tr>
<tr>
<td>
<input name="os23" type="text" id="os23" value="" size="10" maxlength="60" />
</td>
</tr>
</table>
<a id="addnew" onclick="AddNewRule();" href="javascript:void(0);">Add +</a>
<table>
<tr>
<td colspan="3" align="left" style="text-align: right; padding-top: 10px;">
<input type="submit" onclick="postMyForm();" value="Update">
</td>
</tr>
</table>
</form>

Answer 2

I don't see you initializing the variable i. We can't see all the source but I imagine this is probably the problem.

Answer 3

Input elements supposed to be inside element...

Answer 4

Why don't you just lose the counter and do it like this:
<input name="os[]" type="text" class="os" value="" size="24" maxlength="60" />
After you add rows dynamically you must bind('click') or just use live() method.