My JavaScript generated form fields/data will no send with rest of form on submit?

Question

I have an external JS file that when I select an amount for pieces on my form the relevant amount of fields are populated (see snippet). When I submit the form these populated fields are not submitted, its like there not even there. How can I make it so my form submits my pieces fields as well as the rest of the form? Please Help. Fiddles appreciated

 $(function () { $("select#pieces").change(function () { $('div#pop').html(''); for (var c = 0, t = $("select#pieces").val(); c < t; c++) { $('div#pop').append("<input type='Text' name='piecex[]' autocomplete='off' required placeholder='Piece Info' required style='width:415px;text-transform:uppercase; margin-bottom:10px; '>"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action='checkBeforePrint.php' method='POST'> <table> <tr> <td>Reference *</td> <td> <input type='number' id='a' name='reference_end1' required size='7' maxlength='1' style='width:90px;font-family:Century Gothic; text-transform:uppercase; '> <input type='Text' id='b' name='reference_end2' required size='7' maxlength='3' style='width:140px;font-family:Century Gothic; text-transform:uppercase;'> <input type='number' id='c' name='reference_end3' required size='7' maxlength='6' style='width:190px;font-family:Century Gothic; text-transform:uppercase;'> <!-- inputs combined above --> <input type='hidden' id='reference_end' name='reference_end'> </td> </tr> </table> </div> </br> <div class="bookinform"> <table> <tr> <td>Name of Driver *</td> <td> <input type='Text' name='driver_name' required autocomplete="off" size='7' maxlength='25' style='width:250px;font-family:Century Gothic'> </td> </tr> <tr> <td></td> </tr> <tr> <td>Vehicle Reg *</td> <td> <input type='Text' name='Vehicle_Reg' required autocomplete="off" size='7' maxlength='15' style='width:250px;font-family:Century Gothic; text-transform:uppercase;'> </td> </tr> <tr> <td></td> </tr> <tr> <td valign='top'>Haulier *</td> <td valign='top'> <input type='Text' id="query" name='haulier' required style='width:250px; font-family:Century Gothic; text-transform:uppercase;'> <tr> <td></td> </tr> <!-- # Blank out the auto-complete haulier as per Richard Walkers request onKeyUp="GetResults(document.getElementById('query').value)" <div id="results" class="box"> </div> --> </td> </tr> <tr> <td>Destination *</td> <td> <input type='Text' id="query2" name='destination' required style='width:250px; text-transform:uppercase;'> </td> </tr> <tr> <td></td> </tr> </table> </div> </br> <div class="bookinform"> <table> <tr> <td>Pieces *</td> <td> <select id="pieces" name='pieces' required style='width:320px; font-family:Century Gothic;'> <option>Select Number Of Pieces</option> <option value=1>1</option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option>?></select> </td> </tr> <!--<tr><td>Labels</td><td>--> <select name='labels' style="display:none"> <option value='0'>SAME AS PIECES</option> <?php $count=1 ; while ($count<=100) { echo "<option value='".$count. "'>".$count. "</option>"; $count++; }; ?> </select> <!--</td></tr>--> </table> </br> <!-- JQUERY POPULATES IN POP pieces fields--> <div id="pop"></div> </div> <!-- Stockimgtest.php php part needs including --> <!-- ** submit ** needs to happen on book in pieces --> <!--Cant have a nested form --> <div class="fileUpload btn btn-primary"> <!--<form action="" method="POST" enctype="multipart/form-data">--> <h4>Attach image/s</h4> <input type="file" name="homefiles[]" multiple value="Upload" style="background-color:#265A88;"> </br> <!--<input type="submit" name="sendpic" value="Upload" style="background-color:#265A88;">--> <!--</form> --> </div> <div class="bookinformbtn"> <div class="bookinform"> <input type='submit' name='FORM' value="Book-in Pieces" style='width:100%;font-family:Century Gothic; margin-top:10px; color:#2EFE2E; font-weight: bold;'> </form> </br> </br> <script src="grnjs.js"></script> 

Answer 1

I'm not 100% sure, but I think you have to submit your data via AJAX because of the newly created fields.

 $('.bookingform input[type=submit]').on('click', function(e){ e.preventDefault(); var data = //gather your data in here $.ajax({ method: 'POST', url: checkBeforePrint.php, data: data, success: function(data, status) { //do something on success }, error: function(err, status) { //do something on err }, complete: function(data) { // do something on complete } }); }) 

Answer 2

What about checkBeforePrint.php. if you are doing $_POST["nameofyourfieldname"], what is the name that you are using? try

$('div#pop').append("<input type='Text'  name='piecex"+ c + "' autocomplete='off' required placeholder='Piece Info' required style='width:415px;text-transform:uppercase; margin-bottom:10px; '>");

in php file

$_POST["piecex0"];

and so on

Answer 3

  $(function () { $("select#pieces").change(function () { $('div#pop').html(''); for (var c = 0, t = $("select#pieces").val(); c < t; c++) { $('div#pop').append("<input type='Text' name='piecex[]' autocomplete='off' required placeholder='Piece Info' required style='width:415px;text-transform:uppercase; margin-bottom:10px; '>"); } }); }); //Content of php is only var_dump($_POST); 

 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> </script> <form action='checkBeforePrint.php' method='POST'> <table> <tr> <td>Reference *</td> <td> <input type='number' id='a' name='reference_end1' required size='7' maxlength='1' style='width:90px;font-family:Century Gothic; text-transform:uppercase; '> <input type='Text' id='b' name='reference_end2' required size='7' maxlength='3' style='width:140px;font-family:Century Gothic; text-transform:uppercase;'> <input type='number' id='c' name='reference_end3' required size='7' maxlength='6' style='width:190px;font-family:Century Gothic; text-transform:uppercase;'> <!-- inputs combined above --> <input type='hidden' id='reference_end' name='reference_end'> </td> </tr> </table> </div> </br> <div class="bookinform"> <table> <tr> <td>Name of Driver *</td> <td> <input type='Text' name='driver_name' required autocomplete="off" size='7' maxlength='25' style='width:250px;font-family:Century Gothic'> </td> </tr> <tr> <td></td> </tr> <tr> <td>Vehicle Reg *</td> <td> <input type='Text' name='Vehicle_Reg' required autocomplete="off" size='7' maxlength='15' style='width:250px;font-family:Century Gothic; text-transform:uppercase;'> </td> </tr> <tr> <td></td> </tr> <tr> <td valign='top'>Haulier *</td> <td valign='top'> <input type='Text' id="query" name='haulier' required style='width:250px; font-family:Century Gothic; text-transform:uppercase;'> <tr> <td></td> </tr> <!-- # Blank out the auto-complete haulier as per Richard Walkers request onKeyUp="GetResults(document.getElementById('query').value)" <div id="results" class="box"> </div> --> </td> </tr> <tr> <td>Destination *</td> <td> <input type='Text' id="query2" name='destination' required style='width:250px; text-transform:uppercase;'> </td> </tr> <tr> <td></td> </tr> </table> </div> </br> <div class="bookinform"> <table> <tr> <td>Pieces *</td> <td> <select id="pieces" name='pieces' required style='width:320px; font-family:Century Gothic;'> <option>Select Number Of Pieces</option> <option value=1>1</option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option>?></select> </td> </tr> <!--<tr><td>Labels</td><td>--> <select name='labels' style="display:none"> <option value='0'>SAME AS PIECES</option> <?php $count=1 ; while ($count<=100) { echo "<option value='".$count. "'>".$count. "</option>"; $count++; }; ?> </select> <!--</td></tr>--> </table> </br> <!-- JQUERY POPULATES IN POP pieces fields--> <div id="pop"></div> </div> <!-- Stockimgtest.php php part needs including --> <!-- ** submit ** needs to happen on book in pieces --> <!--Cant have a nested form --> <div class="fileUpload btn btn-primary"> <!--<form action="" method="POST" enctype="multipart/form-data">--> <h4>Attach image/s</h4> <input type="file" name="homefiles[]" multiple value="Upload" style="background-color:#265A88;"> </br> <!--<input type="submit" name="sendpic" value="Upload" style="background-color:#265A88;">--> <!--</form> --> </div> <div class="bookinformbtn"> <div class="bookinform"> <input type='submit' name='FORM' value="Book-in Pieces" style='width:100%;font-family:Century Gothic; margin-top:10px; color:#2EFE2E; font-weight: bold;'> </div> </div> </form> </br> </br> </html>