Let me start by saying three things:
0.) This is probably a terrible way to accomplish my objective, but it's the best way I could think of. With that said, I'm open to any suggestions in terms of cleaning up the code shown below.
1.) This problem probably has something to do with objects not being bound to the DOM.
2.) I have no idea what that actually means. Despite countless hours googling for WTF does DOM mean...
Here is my problem: when I POST the forms shown below, it leaves out a few of the values from the very first form
I have a form that looks like this:
<div class="col-md-8" id="hoursdetailsdiv">
<form id="hoursdetails_1" class="form-inline totalform" role="form" >
<div class="form-group">
<input type="hidden" class="form-control" id="ps_serial_pk_1" placeholder="serial pk" readonly>
<input type="hidden" class="form-control" id="placeholder_employee_1" name="placeholder_employee_1" placeholder="employee_fk" readonly>
<input type="hidden" class="form-control" id="placeholder_date_1" name="placeholder_date_1" placeholder="date from top" readonly>
<input type="hidden" class="form-control" id="ps_function_pk_1" name="ps_function_pk_1" placeholder="ps_function_pk_1" readonly>
</div>
<div class="form-group">
<input type="text" class="form-control" id="ps_serialNumber_1" placeholder="serial or job number" required>
<input type="text" class="form-control" id="ps_model_1" tabindex="-1" placeholder="Model" readonly required>
<input type="text" class="form-control" id="daps_hours_1" name="daps_hours_1" placeholder="Hours" required>
<input type="text" class="form-control" id="ps_function_1" placeholder="Function" required>
</div>
</form>
</div><!--/hoursdetails-->
<button type="button" id="addbutton" name="addbutton"class="btn btn-default">Add Row</button>
<button type="button" id="submitForm" name="submitForm" class="btn btn-warning" >Submit Entry</button>
Several of the fields are autocomplete, which return multiple values (to populate the hidden fields).
The 'addbutton' button clones this form, and renames it to hoursdetails_# where # represents an incrementing value.
Here is the code for cloning the form:
$(function(){
var template = $('#hoursdetailsdiv .form-inline:first').clone();
var detailsCount = 1;
window.addDetails = function(){
detailsCount++;
var forminline = template.clone().find(':input').each(function(){
var newId = this.id.substring(0, this.id.length-1) + detailsCount;
$(this).prev().attr('for', newId); // update label for
this.name = this.id = newId; // update id and name (assume the same)
}).end()
.attr('id', 'hoursdetails_' + detailsCount)
.appendTo('#hoursdetailsdiv');
//add our existing static data to the new fields (employee id and date)
$('#placeholder_employee_'+detailsCount).val($('#placeholder_employee_1').val())
$('#placeholder_date_'+detailsCount).val($('#placeholder_date_1').val())
//now put the focus on the new input field
$('#ps_serialNumber_'+detailsCount).focus();
injectNewLookup(detailsCount);
}
});
The function that's called at the end of the cloning function (injectNewLookup()) is here. After playing around some, I found that I needed to do this in order for the new autocomplete fields to work properly
function injectNewLookup(curID){
//rebind events to dynamic elements
$('#ps_serialNumber_'+curID).autocomplete({
source: "mysql_lookups/p_lookup.php",
autoFocus: true,
minLength: 4,
select: function(event, ui) {
$('#ps_serialNumber_'+curID).val(ui.item.ord_no);
$('#ps_model_'+curID).val(ui.item.plant_name);
$('#ps_serial_pk_'+curID).val(ui.item.ps_fk);
}
});
$("#ps_function_"+curID).autocomplete(
{
source: "mysql_lookups/f_lookup.php",
autoFocus: true,
minLength: 2,
select: function(event, ui) {
$('#ps_function_'+curID).val(ui.item.item_no);
$('#ps_function_pk_'+curID).val(ui.item.function_pk);
}
});
}
Everything works fine EXCEPT, when I submit the form, it leaves out a few of the values from the very first form
Here are the results from console.log
placeholder_employee_1=&placeholder_date_1=&ps_function_pk_1=&daps_hours_1=
ps_serial_pk_2=&placeholder_employee_2=&placeholder_date_2=&ps_function_pk_2=&ps_serialNumber_2=&ps_model_2=&daps_hours_2=&ps_function_2=
I am submitting the form(s) with this code:
$('#submitForm').on('click', function () {
$('Form[id^=hoursdetails_]').each(function () {
console.log($(this).serialize());
//post_form_data($(this).serialize());
});
});
function post_form_data(data) {
$.ajax({
type: 'POST',
url: 'submits.php',
data: data,
beforeSend: function(){//alert(data)
},
success: function (data, textStatus) {
//debugging use only
$("#target").append(data);
},
error: function () {}
});
}
In summary, my question is: why are some of the fields from the FIRST form being left off the post string? And how do I fix it?
Thanks for any help!