我的 JavaScript 生成的表单字段/数据在提交时不会与其他表单一起发送？答案

【问题标题】：My JavaScript generated form fields/data will no send with rest of form on submit?我的 JavaScript 生成的表单字段/数据在提交时不会与其他表单一起发送？
【发布时间】：2015-11-12 11:58:53
【问题描述】：

我有一个外部 JS 文件，当我在表单上选择数量时，会填充相关的字段数量（参见 sn-p）。当我提交表单时，这些填充的字段没有提交，就像那里没有一样。我怎样才能让我的表格提交我的作品字段以及表格的其余部分？请帮忙。小提琴赞赏

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

【问题讨论】：

标签： javascript jquery html forms

【解决方案1】：

我不能 100% 确定，但我认为由于新创建的字段，您必须通过 AJAX 提交数据。

$('.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
    }
  });    
})

【讨论】：

收集所有数据的最佳方式是什么> 我应该在表单中设置 onsubmit="submitmyform();return false" 吗？ @riXon
执行var data = {}; $('form').find('input').forEach(function(input){ data[$(input).attr('name')] = $(input).val(); }); 之类的操作，您不必设置onsubmit，因为on('click') 函数中的e.preventDefault(); 将阻止通过点击按钮发送表单。
仍然提交原始表单没有ajax

【解决方案2】：

checkBeforePrint.php 怎么样。如果您正在执行 $_POST["nameofyourfieldname"]，您使用的名称是什么？试试

$('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; '>");

在php文件中

$_POST["piecex0"];

等等

【讨论】：

$_POST['piecex'];但 id 甚至没有被发送到 checkBeforePrint.php
您的 checkBeforePrint.php 是否与您的 html 文件位于同一文件夹中？我在本地机器上试了一下，效果很好。
是同一个文件夹......如果我死了(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" }
checkBeforePrint.php 仅供参考。 piecex 甚至没有出现
我无法查明您的错误。当我 var_dump($_POST).数组(12) { ["reference_end1"]=> 字符串(1) "1" ["reference_end2"]=> 字符串(1) "a" ["reference_end3"]=> 字符串(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"]= > 数组(3) { [0]=> 字符串(4) "什么" [1]=> 字符串(3) "是" [2]=> 字符串(4) "这个" } ["FORM"]=> string(14) "书入件" } . piecex 已发布。

【解决方案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>

【讨论】：