0
我創建了一個腳本,用於發送表單,該表單根據用戶的選擇發送動態表單。當顯示從無到屏蔽時,動態表單不提交
在html方面的表單看起來很好,jQuery方面的代碼執行得很好,直到實際的表單提交,並且控制檯日誌中沒有任何東西告訴我有任何錯誤。
我能想到的唯一的事情就是這個表格開始顯示:none;在CSS中,然後成爲可用的人點擊按鈕添加新的付款。
這是事物的HTML端:
<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>
無需顯示CSS如第9類的唯一顯示器無法比擬的。
$('#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);
}
});
});
});
就算我不驚人的jQuery的是它不是什麼我用了很多,我相信一個行家將能夠斬下來以更高效和簡化,但根據控制檯我沒有問題,並且當它的全部顯示時,html看起來也不錯,所以我看不到表單沒有提交的原因。
感謝
發送一個空的表單,這意味着表單仍然沒有發送,謝謝你的幫助:) – Robert
1.將name屬性設置爲所有輸入字段。 2.在ajax將「data:new FormData(this)」更改爲「data:$('#addform')。serialize()」。我已經更新了上面的代碼「完整的代碼」 –
嗨@Rajesh Karunakaran仍然返回一個空的表單,它的形式從來沒有存在過......我甚至嘗試刪除顯示:沒有在CSS中,並沒有做任何事 – Robert