Why are only part of my form fields submitting?

Question

I'm working on a dynamic form where users can add locations as they go and I'm very close to wrapping this up but now I'm realizing that only the first part of the arrays is being submitted. The submit button is at the end and all the fields are the same using the []. Before I paste my code, I'll first go over how I tested the issue. First, no additional data is in my db - only the first location. Second, when I do a var_dump the array only shows me the first location.

<div id="locInformation">
<form name="assessment" action="create_new_record.php" method="post" enctype="multipart/form-data">

<input type="hidden" name="id" value="<?=$id?>">
<p>Location: <input type="text" name="location[]"  > </p>
<p>Department name: <input type="text" name="department_name[]"  > </p>
<p>Participant name: <input type="text" name="participant_name[]" > </p>
<p>Activity performed: <textarea cols="25" rows="3" name="activity[]" ></textarea> </p>
<p>Conditon: <select class="form-control" name="condition[]" style="width:20%;">
  <option value="dry" id="dry">Dry</option>
  <option value="heavy_oil" id="heavy_oil">Heavy Oil/Grease</option>
  <option value="light_oil" id="light_oil">Light Oil</option>
  <option value="sandy" id="sandy">Sandy/Grit</option>
  <option value="wet" id="wet">Slightly Wet</option>
</select></p>

<div class="well">
<p>Avg Number of Non-recordable Injuries: <input type="number" name="non_rec_injuries[]" >
 <select name="non_rec_injury_timeframe[]">
    <option value="last month">Last month</option>
    <option value="last 6 months">Last 6 months</option>
    <option value="last 12 months">Last 12 months</option>
 </select>
</p>
<h4>Based on the number of Non-recordable Injuries - Estimate the Injury Type by Percentage </h4>
<div class="container-fluid">
  <div class="form-group row">
    <div class="col-md-3 col-sm-4"><input class="form-control" name="non_rec_cuts[]" type="number" min="0" max="100" value="" placeholder="Cuts / Lacerations / Abrasion" > </div>
    <div class="col-md-3 col-sm-4"><input class="form-control" name="non_rec_burns[]" type="number" min="0" max="100" value="" placeholder="Heat or Chemical Burn" ></div>
    <div class="col-md-3 col-sm-4"><input class="form-control" name="non_rec_infection[]" type="number" min="0" max="100" value="" placeholder="Infection" > </div>
    <div class="col-md-3 col-sm-4"><input class="form-control" name="non_rec_dermatitis[]" type="number" min="0" max="100" value="" placeholder="Dermatitis" > </div>
    <div class="clearfix visible-xs-block"></div> <div class="hidden-xs hidden-sm"><br ><br ></div>
    <div class="col-md-3 col-sm-4"><input class="form-control" name="non_rec_puncture[]" type="number" min="0" max="100" value="" placeholder="Puncture" ></div>
    <div class="col-md-3 col-sm-4"><input class="form-control" name="non_rec_sprain[]" type="number"  min="0" max="100" value="" placeholder="Carpal Tunnel / Sprain" ></div>
    <div class="col-md-3 col-sm-4"><input class="form-control" name="non_rec_impact[]" type="number" min="0" max="100" value="" placeholder="Impact / Contusion / Inflammation" >
    </div>
  </div>
</div>
</div>

<p>Estimated Cost of Productivity (Downtime)/minute: $ <input type="number" name="cost_of_productivity[]" > </p>
<p>Percent of leakage related to uncontrolled dispensing: <input type="number" min="0" max="100" name="leakage[]" > % </p>
<p>Which competitor is the participant using?  <input type="text" name="competitor[]" ></p>
<p>Usage Rate per 12 months (pairs): <input type="number" min="0" name="usage_rate[]" ></p>
<p>Estimated cost per pair: $ <input type="number" min="0" name="cost_per_pair[]" ></p>
<br >     

<!--<input style="margin-left:10px;" class="btn btn-warning" type="button" value="Remove Location" onclick="removeLoc('locInformation','additionalLoc'); ">-->

<div class="hidden" id="additionalLoc" >
<br><p>Location: <input type='text' name='location[]'  > </p>
<p>Department name: <input type='text' name='department_name[]'  > </p>
<p>Participant name: <input type='text' name='participant_name[]' > </p>
<p>Activity performed: <textarea cols='25' rows='3' name='activity[]' ></textarea> </p>
<p>Conditon: <select class='form-control' name='condition[]' style='width:20%;'>
  <option value='dry' id='dry'>Dry</option>
  <option value='heavy_oil' id='heavy_oil'>Heavy Oil/Grease</option>
  <option value='light_oil' id='light_oil'>Light Oil</option>
  <option value='sandy' id='sandy'>Sandy/Grit</option>
  <option value='wet' id='wet'>Slightly Wet</option>
</select></p>

<div class="well"> 

<p>Avg Number of Non-recordable Injuries: <input type='number' name='non_rec_injuries[]' >
 <select name='non_rec_injury_timeframe[]'>
    <option value='last month'>Last month</option>
    <option value='last 6 months'>Last 6 months</option>
    <option value='last 12 months'>Last 12 months</option>
 </select>
</p>
<h4>Based on the number of Non-recordable Injuries - Estimate the Injury Type by Percentage </h4>
<div class='container-fluid'>
  <div class='form-group row'>
    <div class='col-md-3 col-sm-4'><input class='form-control' name='non_rec_cuts[]' type='number' min='0' max='100' value='' placeholder='Cuts / Lacerations / Abrasion' > </div>
    <div class='col-md-3 col-sm-4'><input class='form-control' name='non_rec_burns[]' type='number' min='0' max='100' value='' placeholder='Heat or Chemical Burn' ></div>
    <div class='col-md-3 col-sm-4'><input class='form-control' name='non_rec_infection[]' type='number' min='0' max='100' value='' placeholder='Infection' > </div>
    <div class='col-md-3 col-sm-4'><input class='form-control' name='non_rec_dermatitis[]' type='number' min='0' max='100' value='' placeholder='Dermatitis' > </div>
    <div class='clearfix visible-xs-block'></div> <div class='hidden-xs hidden-sm'><br ><br ></div>
    <div class='col-md-3 col-sm-4'><input class='form-control' name='non_rec_puncture[]' type='number' min='0' max='100' value='' placeholder='Puncture' ></div>
    <div class='col-md-3 col-sm-4'><input class='form-control' name='non_rec_sprain[]' type='number'  min='0' max='100' value='' placeholder='Carpal Tunnel / Sprain' ></div>
    <div class='col-md-3 col-sm-4'><input class='form-control' name='non_rec_impact[]' type='number' min='0' max='100' value='' placeholder='Impact / Contusion / Inflammation' ></div>
  </div>
</div>
</div>

<p>Estimated Cost of Productivity (Downtime)/minute: $ <input type='number' name='cost_of_productivity[]' > </p>
<p>Percent of leakage related to uncontrolled dispensing: <input type='number' min='0' max='100' name='leakage[]' > % </p>
<p>Which competitor is the participant using?  <input type='text' name='competitor[]' ></p>
<p>Usage Rate per 12 months (pairs): <input type='number' min='0' name='usage_rate[]' ></p>
<p>Estimated cost per pair: $ <input type='number' min='0' name='cost_per_pair[]' ></p>

</div>

</div>
<br >
<input style="margin-left:5px;" class="btn btn-primary" type="button" value="Add Additional Location"  onClick="addInput('locInformation');">
<input style="margin-left:10px;" class="btn btn-success submit" type="submit" name="submit" value="Submit Assessment">

</form>
<br >

</div>

    </body>
</html>

My only thought is the JS for the dynamic field is messing something up. The div additionalLoc has a class="hidden" tag so it does not show on the initial load. I did a search and came across a few similar issues but the answers were not applicable such as Part of form doesn't submit .

Answer 1

Ok I have this working now. The problem was with my HTML. After taking a step back from thinking the JS or PHP was the problem, I concluded that HTML might be the issue here. Using a tool like https://validator.w3.org/ to look at the HTML identified a few issues and once corrected, the form works as expected.

The first problem was I had multiple id fields (which are not required anyway) and the fields were not unique - which is required if using id .

Second, issue was an extra </div> causing a formatting issue.

Third, I changed my JS extra location div from class="hidden" to style="display:none" .