0

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!

1 Answer 1

0

Some of the input elements don't have name attributes so they don't get submitted. When you clone the cloning script is setting names for each one of those so it works for every cloned form. Missing fields must be

ps_serial_pk_1
ps_serialNumber_1
ps_model_1
ps_function_1

Change your form code to

<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" name="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" name="ps_serialNumber_1" placeholder="serial or job number" required>
            <input type="text" class="form-control" id="ps_model_1" name="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" name="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>
1
  • And that'll do it! I feel like a total stooge right now.
    – Edward
    Mar 5, 2014 at 14:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.