javascript - Jquery 智能向导 5 表单字段通过 ajax 在下一个选项卡中动态加载，而不是在 ajax 表单中提交

Question

我正在使用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");
    }
});

标签： javascriptphpjqueryajaxsmart-wizard