我正在使用jquery 智能向导 5并使用 leaveStep ajax 在下一个选项卡中添加输入字段数组,但是当我最终提交表单时,添加的输入字段没有在 ajax 帖子中提交。
表格
<form id="formCreateOutboundShipment">
<div id="smartwizard" class="bg-white">
<ul class="nav">
<li><a class="nav-link active" href="#step-1">Basic Information</a></li>
<li><a class="nav-link" href="#step-2">Shipment Items</a></li>
</ul>
<div class="tab-content">
<div id="step-1" class="tab-pane" role="tabpanel">
<h3>Basic Information</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="form-group row">
<label for="txtWhCode" class="col-sm-2 col-form-label">Ship from Gxpress warehouse: </label>
<div class="col-sm-4">
<select name="txtWhCode" id="txtWhCode" data-width="100%" data-size="5" data-live-search="true" title="Select from warehouse" class="selectpicker"></select>
</div>
</div>
<div class="form-group row">
<label for="txtShpDate" class="col-sm-2 col-form-label">Shipment out date: </label>
<div class="col-sm-4">
<input name="txtShpDate" id="txtShpDate" class="flatpickr flatpickr-input form-control-form-control-sm datepicker" placeholder="Select date"></input>
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Ship to location: </label>
<div class="col-sm-4">
<div class="form-group">
<input type="text" name="txtAddLn1" id="txtAddLn1" class="form-control form-control-sm mb-3" placeholder="Address Line 1">
<input type="text" name="txtAddLn2" id="txtAddLn2" class="form-control form-control-sm mb-3" placeholder="Address Line 2">
<div class="form-row">
<div class="form-group col-md-6">
<input type="text" name="txtCity" id="txtCity" class="form-control form-control-sm" placeholder="City">
</div>
<div class="form-group col-md-6">
<input type="text" name="txtState" id="txtState" class="form-control form-control-sm" placeholder="State">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input type="text" name="txtPostalCode" id="txtPostalCode" class="form-control form-control-sm" placeholder="Postal Code">
</div>
<div class="form-group col-md-6">
<input type="text" name="txtCountry" id="txtCountry" class="form-control form-control-sm" placeholder="Country">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="step-2" class="tab-pane" role="tabpanel">
Gxpress Warehouse
<div id="resStocks"></div>
</div>
<div id="step-3" class="tab-pane" role="tabpanel">
Shipment Items
</div>
</div>
</div>
使用 leaveStep ajax 请求在下一个选项卡中将输入字段添加到表单,成功后提交完整的表单,但使用 ajax 添加的数据未在表单中提交
$("#smartwizard").on("leaveStep", function(e, anchorObject, currentStepIndex, nextStepIndex, stepDirection) {
//return confirm("Do you want to leave the step " + currentStepIndex + "?");
//alert(stepDirection)
if(nextStepIndex == 1) {
let wh_code = $('#txtWhCode').val();
$.ajax({
method : "GET",
url : "<?php echo base_url('shipments/outbound/get_cust_stocks'); ?>",
data: "WhCode="+wh_code,
dataType: "json",
beforeSend: function(xhr) {
// Show the loader
$('#smartwizard').smartWizard("loader", "show");
},
complete: function() {
$('#smartwizard').smartWizard("loader", "hide");
},
success: function(res) {
// console.log(res.success)
if(res.success) {
$('#resStocks').load(res.stocks);
$('#btnFinish').removeClass("d-none");
$('.sw-btn-next').addClass('d-none');
/**
* Form Add Shp Header
*/
$('#formCreateOutboundShipment').submit(function(event){
event.preventDefault();
let shp_form = new FormData();
console.log(shp_form);
$.ajax({
type: "post",
url: "<?php echo base_url('shipments/outbound/create_shipment'); ?>",
data: $(this).serialize(),
dataType: "json",
beforeSend: function() {
$('#loader').removeClass('d-none');
},
complete: function() {
$('#loader').addClass('d-none');
},
success: function(res) {
if(res.success) {
//$('#cardAddShpHeader').addClass('d-none');
//$('#cardAddShpItems').html(res.stocks);
/* $('#txtShpId').text(res.gxp_shp_id);
$('#txtIbShpId').val(res.ibshp_id); */
}
else {
swal({title: "Oops!", text: res.message, icon: "error", html: true});
}
},
error: function(xhr) {
const xhr_text = xhr.status+" "+xhr.statusText;
swal({title: "Request Error!", text: xhr_text, icon: "error"});
}
});
});
} else $('#resStocks').html(res.message);
},
error: function(xhr) {
$('#resStocks').html("Error in ajax call");
}
})
} else if(nextStepIndex < 1) {
$('.sw-btn-next').removeClass('d-none');
$('#btnFinish').addClass("d-none");
}
});