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>

coderocket · Accepted Answer · 2015-11-12 12:19:36Z

0

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
    }
  });    
})

answered Nov 12, 2015 at 12:19

coderocket

5843 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JIMMY THE CODE Over a year ago

Whats the best way to gather all the data> And in the form shall I set the on onsubmit="submitmyform();return false" ? @riXon

coderocket Over a year ago

Do something like

var data = {};     $('form').find('input').forEach(function(input){        data[$(input).attr('name')] =  $(input).val();     });

you dont have to set the onsubmit because the e.preventDefault(); in the on('click') function will prevent sending the form by hitting the button.

JIMMY THE CODE Over a year ago

still submits the original form no the ajax

Jr. Captain · Accepted Answer · 2015-11-12 12:24:30Z

0

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

answered Nov 12, 2015 at 12:24

Jr. Captain

435 bronze badges

16 Comments

JIMMY THE CODE Over a year ago

$_POST['piecex']; but id doesn't even get sent to checkBeforePrint.php

Jr. Captain Over a year ago

Is your checkBeforePrint.php in the same folder as your html file? I tried in my local machine and works fine.

JIMMY THE CODE Over a year ago

Yes same folder ...... If I die(var_dump($_POST));. ---- array(11) { ["reference_end1"]=> string(1) "1" ["reference_end2"]=> string(3) "abc" ["reference_end3"]=> string(1) "1" ["reference_end"]=> string(5) "1abc1" ["driver_name"]=> string(4) "test" ["Vehicle_Reg"]=> string(4) "test" ["haulier"]=> string(6) "IMPORT" ["destination"]=> string(4) "test" ["labels"]=> string(1) "0" ["pieces"]=> string(1) "3" ["FORM"]=> string(14) "Book-in Pieces" }

JIMMY THE CODE Over a year ago

thats on checkBeforePrint.php FYI. piecex doesn't even show up

Jr. Captain Over a year ago

I cannot pinpoint your error. When I var_dump($_POST). array(12) { ["reference_end1"]=> string(1) "1" ["reference_end2"]=> string(1) "a" ["reference_end3"]=> string(1) "1" ["reference_end"]=> string(0) "" ["driver_name"]=> string(1) "a" ["Vehicle_Reg"]=> string(1) "a" ["haulier"]=> string(1) "a" ["destination"]=> string(1) "a" ["labels"]=> string(1) "0" ["pieces"]=> string(1) "3" ["piecex"]=> array(3) { [0]=> string(4) "what" [1]=> string(3) "is " [2]=> string(4) "this" } ["FORM"]=> string(14) "Book-in Pieces" } . piecex is posted.

|

Jr. Captain · Accepted Answer · 2015-11-12 14:40:34Z

	$(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>

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

16 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

16 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related