Dynamic JQUERY array works for some records

Question

Thanks to the help from StackOverflow I have got as far as creating a single line entry with fields and then this adds each field to an array but the Hours SQL statement isn't working e.g. it will have blank sql entries for the first 2 records and then work correctly on another but I cannot see what I am doing wrong. Any help would be very appreciated.

 <td colspan="3" align="left"><div id="hoursrow">
        <p> <span class="text">Hours Labour :</span></span></p>
        <p> <span class="headings"><span class="text"><span class="hours">Start Time:
          <input type="time" name="add_start" size="4" />
          Finish Time:
          <input type="time" name="add_finish" size="4" />
          Date:
          <input type="date" name="add_date" size="4" />
          OVT:
          <input type="checkbox" name="add_overtime_hours" id="add_overtime_hours" size="1" maxlength="1" />
          </span></span><span class="text"><span class="hours">
        <input onclick="addhours(this, event);" type="button" value="Add Labour" />
        </span></span></p>
        <p class="headings"><span class="text"><span class="hours">
          <span class="info">(This row will not be saved unless you click on "Add Labour" first) </span></span></span></p>
        </div></td>
      <td width="7"></td>
      </tr>
    <tr>



var rownumhours = 1;

function addhours(obj, e) {
  rownumhours++;
  var hoursrow = '<p id="rownumhours' + rownumhours + '">Start Time: <input type="time" name="add_start[' + rownumhours + ']" size="4" value="' +
  $(obj).closest('span.headings').find('[name="add_start"]').val() + '">  Finish Time: <input type="time" name="add_finish[' + rownumhours + ']" value="' +
  $(obj).closest('span.headings').find('[name="add_finish"]').val() + '"> Date: <input type="date" name="add_date[' + rownumhours + ']" value="' +
  $(obj).closest('span.headings').find('[name="add_date"]').val() + '"> Show_Overtime: <input type="text" name="show_overtime_hours[' + rownumhours + ']" size="1" value="' + 
  (($(obj).closest('span.headings').find('[name="add_overtime_hours"]').is(':checked')) ? '1' : '0' ) + '"> Overtime: <input type="checkbox" name="add_overtime_hours[' + rownumhours + ']" size="1" value="'                       +                       
  $(obj).closest('span.headings').find('[name="add_overtime_hours"]').val() + '"' +
      (($(obj).closest('span.headings').find('[name="add_overtime_hours"]').is(':checked')) ? 'checked' : '') +
  ' "> <input type="button" value="Remove" onclick="removeRow(' +
      rownumhours + ');"></p>';
  jQuery('#hoursrow').append(hoursrow);

    $(obj).closest('span.headings').find('[name="add_start"]').val("");
    $(obj).closest('span.headings').find('[name="add_finish"]').val("");
    $(obj).closest('span.headings').find('[name="add_date"]').val("");
    $(obj).closest('span.headings').find('[name="show_overtime_hours"]').val("");
        $(obj).closest('span.headings').find('[name="add_overtime_hours"]').removeAttr('checked');
 }
function removeRow(rnum) {
  jQuery('#rownumhours' + rnum).remove();
}

So it is showing on the page properly as I want it to but then the major problem is is won't add properly to the database.

I have echo'd the sql that is to be inserted into the database and it shows the following.

INSERT INTO hours(job_number,start_time,finish_time,date,overtime)
       VALUES('904','','','','')
INSERT INTO hours(job_number,start_time,finish_time,date,overtime) 
       VALUES('904','','','','')
INSERT INTO hours(job_number,start_time,finish_time,date,overtime) 
       VALUES('904','10:10','11:11','2017-01-03','') //

The Sql part is as follows

        if (
                 !empty($_POST['add_start']) && !empty($_POST['add_finish']) && !empty($_POST['add_date']) && !empty($_POST['show_overtime_hours'])&&
                 is_array($_POST['add_start']) && is_array($_POST['add_finish']) && is_array($_POST['add_date']) && is_array($_POST['show_overtime_hours'])&& 
                count($_POST['show_overtime_hours']) && count($_POST['add_finish']) && count($_POST['add_date']) === count($_POST['add_start']) 
                ) {
                $add_start_array = $_POST['add_start'];
                $add_finish_array = $_POST['add_finish'];
                $add_overtime_hours_array = $_POST['show_overtime_hours'];
                $add_date_array =$_POST['add_date'];                    
                     for ($i = 0; $i < count($add_start_array); $i++) {
                        $add_start_values = $mysqli->real_escape_string($add_start_array[$i]);
                        $add_finish_values = $mysqli->real_escape_string($add_finish_array[$i]);
                        $add_date_values = $mysqli-> real_escape_string($add_date_array[$i]);
                        $add_overtime_hours_boolean = $mysqli-> real_escape_string($add_overtime_hours_array[$i]);
                        $sql_add_hours = "INSERT INTO hours(job_number,start_time,finish_time,date,overtime) VALUES('$increment_job_number','$add_start_values','$add_finish_values','$add_date_values','$add_overtime_hours_boolean')";

                        $mysqli-> query($sql_add_hours);
                        // This next section is for debugging only
                        //echo ($add_date_values);
                        //echo ($add_start_values);
                        //echo ($add_finish_values);
                        echo ($sql_add_hours);
                        //echo ($add_overtime_hours_values);

                }

Answer 1

Thank you all so very much for the help. I am sorry It took a few days to reply. I have made the changes by taking the rownumhours ++ off and using the [] for the naming to be taken care of itself which I had no idea it was clever enough to do it on its own.

The Mysql Section worked well and I also left the html section because I only wanted to have different names for the multiple hours into the entries

 var rownumhours = 0;

 function addhours(obj, e) {
  var hoursrow = '<p id="rownumhours' + rownumhours + '">Start Time: <input type="time" name="add_start[]" size="4" value="' +
  $(obj).closest('span.headings').find('[name="add_start"]').val() + '">  Finish Time: <input type="time" name="add_finish[]" value="' +
  $(obj).closest('span.headings').find('[name="add_finish"]').val() + '"> Date: <input type="date" name="add_date[]" value="' +
  $(obj).closest('span.headings').find('[name="add_date"]').val() + '"> <input type="hidden" name="show_overtime_hours[]" size="1" value="' + 
  (($(obj).closest('span.headings').find('[name="add_overtime_hours"]').is(':checked')) ? '1' : '0' ) + '"> Overtime: <input type="checkbox" name="add_overtime_hours[]" size="1" value="'                      +                       
  $(obj).closest('span.headings').find('[name="add_overtime_hours"]').val() + '"' +
      (($(obj).closest('span.headings').find('[name="add_overtime_hours"]').is(':checked')) ? 'checked' : '') +
  ' "> <input type="button" value="Remove" onclick="removeRow(' +
  rownumhours + ');"></p>';
  jQuery('#hoursrow').append(hoursrow);
  rownumhours++;

    $(obj).closest('span.headings').find('[name="add_start"]').val("");
    $(obj).closest('span.headings').find('[name="add_finish"]').val("");
    $(obj).closest('span.headings').find('[name="add_date"]').val("");
    $(obj).closest('span.headings').find('[name="show_overtime_hours"]').val("");
    $(obj).closest('span.headings').find('[name="add_overtime_hours"]').removeAttr('checked');
   }
function removeRow(rnum) {
  jQuery('#rownumhours' + rnum).remove();
   }

</script>

Answer 2

Quick Fix

You increment the rownumhours before dynamically adding a new row of fields.

The quickest fix is change the rownumhours value to 0

var rownumhours = 0;

So the newly added row of fields will have the index of 1 and up.

Also add [] to the name tag to the first/default row:

<input type="time" name="add_start[]" size="4"> <!-- this will have an index of 0 -->
<!-- DO THE SAME WITH FIRST/DEFAULT SET OF FIELDS -->

---

Recommendation

But what you can actually do is do not bother with the assigning of index.

Just put [] to the given row of fields:

<td colspan="3" align="left">
        <div id="hoursrow">
            <p>
                <span class="text">Hours Labour :</span>
            </p>
            <p>
                <span class="headings">
                    <span class="text">
                        <span class="hours">
                            Start Time: <input type="time" name="add_start[]" size="4" />
                            Finish Time: <input type="time" name="add_finish[]" size="4" />
                            Date: <input type="date" name="add_date[]" size="4" />
                            OVT: <input type="checkbox" name="add_overtime_hours[]" id="add_overtime_hours" size="1" maxlength="1" />
                        </span>
                    </span>
                    <span class="text">
                        <span class="hours">
                            <input onclick="addhours(this, event);" type="button" value="Add Labour" />
                        </span>
                    </span>
                </span>
            </p>
            <p class="headings">
                <span class="text">
                    <span class="hours">
                        <span class="info">(This row will not be saved unless you click on "Add Labour" first)</span>
                    </span>
                </span>
            </p>
        </div>
    </td>

Then remove the rownumhours and do not assign index for dynamically added input fields:

var hoursrow = '<p id="rownumhours' + rownumhours + '">Start Time: <input type="time" name="add_start[]" size="4" value="' +  $(obj).closest('span.headings').find('[name="add_start"]').val() + '"> /*** JUST CONTINUE THE REST OF THE INPUT FIELDS ***/

Answer 3

Ok, after doing some inspections, actually the first group of the html components produced from the JQuery is :

"Start Time:"
<input type="time" name="add_start[2]" size="4" value="23:57">
"Finish Time:"
<input type="time" name="add_finish[2]" size="4" value="22:57">
"Date:"
<input type="date" name="add_date[2]" value="2017-01-13">
"Show_overtime:"
<input type="text" name="show_overtime_hours[2]" size="1" value="0">
"Overtime:"
<input type="checkbox" name="add_overtime_hours[2]" size="1" value="on">
<input type="button" value="Remove" onclick="removeRow(2)">

You see there...,the counter (rownumhours) starts from 2.

Thus in your php part, the first entries for these array :

$add_start_array = $_POST['add_start'];
$add_finish_array = $_POST['add_finish'];
$add_overtime_hours_array = $_POST['show_overtime_hours'];
$add_date_array =$_POST['add_date'];

Also at 2nd-index, but as your loop starts from zero , hence the entry for the location is empty.

So start the rownumhours in javascript part from -1:

var rownumhours = -1;