我的JavaScript生成的表单字段/数据在提交时不会与表单的其余部分一起发送
My JavaScript generated form fields/data will no send with rest of form on submit?
我有一个外部JS文件，当我为表单上的片段选择数量时，会填充相关数量的字段（请参阅片段）。当我提交表单时，这些填充的字段没有提交，就像那里甚至没有一样。如何使我的表单提交我的片段字段以及表单的其余部分？请帮忙。Fiddles赞赏
$(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>我不能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
}
});
}) 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"];
依此类推
$(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>相关文章：
- 可以't让我的if语句处理js中的html表单输入
- 如何使用WCF服务和javascript表单post上传.doc文件
- Javascript生成的表单未提交
- 如何使用javascript或html下载PDF格式的填写表单
- HTML表单提交时未执行外部函数
- 如何将输入(type=text）从html表单传递到javascript函数
- 通过单击表单中的按钮，在代码生成中使用javascript生成字母数字代码
- Ajax发布表单序列化，发布引号'
- 多级HTML表单
- 后焦点更改为IE 11中的地址栏，而不是转移到表单中的下一个控件
- 在验证和发送邮件后更改联系人表单的 html
- jQuery表单添加不适用于下拉列表
- Rails/JSON:如何将JSON用于jquery UI自动完成表单
- 如何从pdftron webviewer获取表单数据
- JS验证ajax返回的html中的表单数据
- Javascript更新孙窗口中的表单元素
- 解析javascript表单验证器
- 阻止表单元素提交
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- Jquery提交表单而不刷新
