Javascript 当显示从无变为块时，动态表单不提交
我创建了一个脚本，它发送一个表单，该表单根据用户的选择而动态变化 html端的表单看起来很好，jQuery端的代码执行得很好，直到实际表单提交为止，控制台日志中没有任何内容告诉我有任何错误 我唯一能想到的是，这种形式开始成为一种展示：无；在css中，用户单击一个按钮添加新付款，然后成为可用付款 以下是html方面的内容：Javascript 当显示从无变为块时，动态表单不提交,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我创建了一个脚本，它发送一个表单，该表单根据用户的选择而动态变化 html端的表单看起来很好，jQuery端的代码执行得很好，直到实际表单提交为止，控制台日志中没有任何内容告诉我有任何错误 我唯一能想到的是，这种形式开始成为一种展示：无；在css中，用户单击一个按钮添加新付款，然后成为可用付款 以下是html方面的内容： <div class="section-9"> <form action="#" id="addform" method="post">
<div class="section-9">
<form action="#" id="addform" method="post">
<div class="row">
<div class="col-sm-12">
<div class="table-responsive" id="addsection">
<table class="table table-responsive table-hover table-striped">
<thead>
<th>Number</th>
<th>Price</th>
<th class="text-center">Installments</th>
<th>Contact Name</th>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control" id="addnumber" value="" placeholder="Enter CPO Number"></td>
<td><input type="text" class="form-control" id="addprice" value="" placeholder="Enter CPO Number"></td>
<td class="text-center"><a href="#" class="btn btn-danger addi">Installments</a></td>
<td><input type="text" class="form-control" id="addcontactname" value="" placeholder="Enter Contact Name"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-12" id="addformajax"></div>
<div class="col-sm-12 margin-top-15">
<p><button class="btn btn-danger btn-block" type="button">SUBMIT</button></p>
</div>
</div>
</form>
</div>
数
价格
分期付款
联系人姓名
提交
$('#addnew').on('click', function(e) {
e.preventDefault();
$('.section-9').show();
//do the click button for cpo installments
$('.addi').on('click', function(event) {
event.preventDefault();
var installmentAmount = '<p><select class="form-control" id="installment-ammount"><option value="0">Please Select How Many Installments Are Required</option>';
for (var i = 1; i <= 60; i++) {
if (i === 1) {
installmentAmount += '<option value="' + i + '">' + i + ' Month</option>';
} else {
installmentAmount += '<option value="' + i + '">' + i + ' Months</option>';
}
}
installmentAmount += '</select></p><div class="showinstallmentdates margin-top-20"></div>';
$('#addformajax').html(installmentAmount);
$('#installment-ammount').bind('input', function() {
var buildDateForms = '<p class="red padding-top-20"><i class="fa fa-star"></i> <em>If all amounts are left empty the price will be distributed evenly across all dates</em></p>';
var howManyInstallments = $(this).val();
var addingIdNames = '';
for (var hmi = 1; hmi <= howManyInstallments; hmi++) {
buildDateForms += '<div class="form-group row"><div class="col-xs-6"><input type="text" class="form-control" id="adddate-' + hmi + '" placeholder="Enter Date To Be Paid" value=""></div><div class="col-xs-6"><input type="text" class="form-control" id="addprice-' + hmi + '" placeholder="Amount To Be Paid" value=""></div></div>';
if (hmi == 1) {
addingIdNames += '#adddate-' + hmi;
} else {
addingIdNames += ', #adddate-' + hmi;
}
}
buildDateForms += '<input type="hidden" value="' + howManyInstallments + '" name="totalinstallments" id="totalinstallments">';
buildDateForms += '<script>jQuery(document).ready(function($){ $("';
buildDateForms += addingIdNames;
buildDateForms += '").datepicker({});});<\/script>';
if (howManyInstallments != 0) {
$('.showinstallmentdates').html(buildDateForms);
} else {
$('.showinstallmentdates').html('');
}
});
});
$("#addform").on('submit', function() {
$.ajax({
url: "/Applications/Controllers/Quotes/ajax-add-sin.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function(sinData) {
$('body').html(sinData);
}
});
});
});
$（'addnew'）。在（'click'，函数（e）上{
e、 预防默认值（）；
$（'.section-9'）.show（）；
//执行cpo分期付款的单击按钮
$（'.addi'）。在（'click'，函数（事件）{
event.preventDefault（）；
var installmentAmount='请选择需要多少分期付款'；
对于（var i=1；i将id添加到按钮
<button id="btn-add-form" class="btn btn-danger btn-block" type="button">SUBMIT</button>
完整代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#addnew').on('click', function (e) {
e.preventDefault();
$('.section-9').show();
//do the click button for cpo installments
$('.addi').on('click', function (event) {
event.preventDefault();
var installmentAmount = '<p><select class="form-control" id="installment-ammount"><option value="0">Please Select How Many Installments Are Required</option>';
for (var i = 1; i <= 60; i++) {
if (i === 1) {
installmentAmount += '<option value="' + i + '">' + i + ' Month</option>';
} else {
installmentAmount += '<option value="' + i + '">' + i + ' Months</option>';
}
}
installmentAmount += '</select></p><div class="showinstallmentdates margin-top-20"></div>';
$('#addformajax').html(installmentAmount);
$('#installment-ammount').bind('input', function () {
var buildDateForms = '<p class="red padding-top-20"><i class="fa fa-star"></i> <em>If all amounts are left empty the price will be distributed evenly across all dates</em></p>';
var howManyInstallments = $(this).val();
var addingIdNames = '';
for (var hmi = 1; hmi <= howManyInstallments; hmi++) {
buildDateForms += '<div class="form-group row"><div class="col-xs-6"><input type="text" class="form-control" id="adddate-' + hmi + '" placeholder="Enter Date To Be Paid" value=""></div><div class="col-xs-6"><input type="text" class="form-control" id="addprice-' + hmi + '" placeholder="Amount To Be Paid" value=""></div></div>';
if (hmi == 1) {
addingIdNames += '#adddate-' + hmi;
} else {
addingIdNames += ', #adddate-' + hmi;
}
}
buildDateForms += '<input type="hidden" value="' + howManyInstallments + '" name="totalinstallments" id="totalinstallments">';
buildDateForms += '<script>jQuery(document).ready(function($){ $("';
buildDateForms += addingIdNames;
buildDateForms += '").datepicker({});});<\/script>';
if (howManyInstallments != 0) {
$('.showinstallmentdates').html(buildDateForms);
} else {
$('.showinstallmentdates').html('');
}
});
});
});
$("#btn-add-form").on('click', function () {
$.ajax({
url: "/Applications/Controllers/Quotes/ajax-add-sin.php",
type: "POST",
data: $('#addform').serialize(),
contentType: false,
cache: false,
processData: false,
success: function (sinData) {
$('body').html(sinData);
}
});
});
});
</script>
</head>
<body>
<div class="section-9">
<form id="addform" method="post">
<div class="row">
<div class="col-sm-12">
<div class="table-responsive" id="addsection">
<table class="table table-responsive table-hover table-striped">
<thead>
<th>Number</th>
<th>Price</th>
<th class="text-center">Installments</th>
<th>Contact Name</th>
</thead>
<tbody>
<tr>
<td><input name="addnumber" type="text" class="form-control" id="addnumber" value="" placeholder="Enter CPO Number"></td>
<td><input name="addprice" type="text" class="form-control" id="addprice" value="" placeholder="Enter CPO Number"></td>
<td class="text-center"><a href="#" class="btn btn-danger addi">Installments</a></td>
<td><input name="addcontactname" type="text" class="form-control" id="addcontactname" value="" placeholder="Enter Contact Name"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-12" id="addformajax"></div>
<div class="col-sm-12 margin-top-15">
<p><button id="btn-add-form" class="btn btn-danger btn-block" type="button">SUBMIT</button></p>
</div>
</div>
</form>
</body>
</html>
新的第1页
$（文档）.ready（函数（）{
$（'#addnew'）。在（'click'，函数（e）上{
e、 预防默认值（）；
$（'.section-9'）.show（）；
//执行cpo分期付款的单击按钮
$（'.addi'）。在（'click'，函数（事件）{
event.preventDefault（）；
var installmentAmount='请选择需要多少分期付款'；
对于（var i=1；我发送了一个空表单，这意味着表单仍然没有发送，但感谢您的帮助：）1.将name属性设置为所有输入字段。2.在ajax中，将“data:new FormData（this）”更改为“data:$（'#addform'）。serialize（）”。我已经更新了“complete code”上面的代码Hi@Rajesh Karunakaran仍然返回一个空表单，就像表单从来都不存在一样……我甚至尝试过删除显示：css中没有，这没有任何作用表单元素在那里，因为如果我使用jquery var test=$（'addnumber'）.val（）进行检查；它会带来正确的值，就像表单没有提交任何内容一样
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#addnew').on('click', function (e) {
e.preventDefault();
$('.section-9').show();
//do the click button for cpo installments
$('.addi').on('click', function (event) {
event.preventDefault();
var installmentAmount = '<p><select class="form-control" id="installment-ammount"><option value="0">Please Select How Many Installments Are Required</option>';
for (var i = 1; i <= 60; i++) {
if (i === 1) {
installmentAmount += '<option value="' + i + '">' + i + ' Month</option>';
} else {
installmentAmount += '<option value="' + i + '">' + i + ' Months</option>';
}
}
installmentAmount += '</select></p><div class="showinstallmentdates margin-top-20"></div>';
$('#addformajax').html(installmentAmount);
$('#installment-ammount').bind('input', function () {
var buildDateForms = '<p class="red padding-top-20"><i class="fa fa-star"></i> <em>If all amounts are left empty the price will be distributed evenly across all dates</em></p>';
var howManyInstallments = $(this).val();
var addingIdNames = '';
for (var hmi = 1; hmi <= howManyInstallments; hmi++) {
buildDateForms += '<div class="form-group row"><div class="col-xs-6"><input type="text" class="form-control" id="adddate-' + hmi + '" placeholder="Enter Date To Be Paid" value=""></div><div class="col-xs-6"><input type="text" class="form-control" id="addprice-' + hmi + '" placeholder="Amount To Be Paid" value=""></div></div>';
if (hmi == 1) {
addingIdNames += '#adddate-' + hmi;
} else {
addingIdNames += ', #adddate-' + hmi;
}
}
buildDateForms += '<input type="hidden" value="' + howManyInstallments + '" name="totalinstallments" id="totalinstallments">';
buildDateForms += '<script>jQuery(document).ready(function($){ $("';
buildDateForms += addingIdNames;
buildDateForms += '").datepicker({});});<\/script>';
if (howManyInstallments != 0) {
$('.showinstallmentdates').html(buildDateForms);
} else {
$('.showinstallmentdates').html('');
}
});
});
});
$("#btn-add-form").on('click', function () {
$.ajax({
url: "/Applications/Controllers/Quotes/ajax-add-sin.php",
type: "POST",
data: $('#addform').serialize(),
contentType: false,
cache: false,
processData: false,
success: function (sinData) {
$('body').html(sinData);
}
});
});
});
</script>
</head>
<body>
<div class="section-9">
<form id="addform" method="post">
<div class="row">
<div class="col-sm-12">
<div class="table-responsive" id="addsection">
<table class="table table-responsive table-hover table-striped">
<thead>
<th>Number</th>
<th>Price</th>
<th class="text-center">Installments</th>
<th>Contact Name</th>
</thead>
<tbody>
<tr>
<td><input name="addnumber" type="text" class="form-control" id="addnumber" value="" placeholder="Enter CPO Number"></td>
<td><input name="addprice" type="text" class="form-control" id="addprice" value="" placeholder="Enter CPO Number"></td>
<td class="text-center"><a href="#" class="btn btn-danger addi">Installments</a></td>
<td><input name="addcontactname" type="text" class="form-control" id="addcontactname" value="" placeholder="Enter Contact Name"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-12" id="addformajax"></div>
<div class="col-sm-12 margin-top-15">
<p><button id="btn-add-form" class="btn btn-danger btn-block" type="button">SUBMIT</button></p>
</div>
</div>
</form>
</body>
</html>