Jquery-Step表单提交

Question

我正在尝试实现此处的JQuery-steps插件：https://github.com/rstaib/jquery-steps

我无法弄清楚如何提交表单。我此时并未使用现场验证。

这是我的JS：

<script>
$(function ()
{
$("#wizard").steps({
    headerTag: "h2",
    bodyTag: "section",
    transitionEffect: "slideLeft",


        onFinishing: function (event, currentIndex)
        {
            var form = $(this);

            // Disable validation on fields that are disabled.
            // At this point it's recommended to do an overall check (mean ignoring only disabled fields)
            //form.validate().settings.ignore = ":disabled";

            // Start validation; Prevent form submission if false
            //return form.valid();
        },
        onFinished: function (event, currentIndex)
        {
            var form = $(this);

            // Submit form input

            form.submit();
        }
        });
    });
</script>

这是我的表格：

<cfform id="form" name="form" method="post" action="actionpages/add_residential_ticket.cfm">
    <cfoutput>
      <input type="hidden" name="ticket_id" id="ticket_id" value="#ticketnum#" readonly>
    </cfoutput>
    <h2>

      <cfinput class="calendarInputBox" value="#DateFormat(now(), "mm/dd/yyyy")#" required="yes" type="hidden" name="date" id="date" message="Please enter a date for this service call" tabindex="0" readonly="true"/>     


      <div id="wizard" >

                <h2>Your Information</h2>
                <section>
                  <cfinput value="#DateFormat(now(), "mm/dd/yyyy")#" required="yes" type="hidden" name="date" id="date" message="Please enter a date for this service call" tabindex="0" readonly="true"/>     
                      <label for="customer">Your Full Name</label>
                      <input class="required" type="text" name="customer" id="customer">


                      <label for="email">Email Address</label>
                      <input class="required" type="email" name="email" id="email">


                      <label for="customer_address">Your Full Mailing Address</label>
                      <textarea class="required" name="customer_address" id="customer_address"></textarea>


                      <label for="phone">Cell Phone Number</label>
                      <input class="required" type="tel" name="phone" id="phone">

                </section>

                <h2>Computer Problem</h2>
                <section>
                      <label for="trouble_reported">Please Provide A Detailed Description Of Your Issue</label><br>
                      <textarea class="required" name="trouble_reported" id="trouble_reported" rows="15" cols="60"></textarea>

                </section>

                <h2>Your Equipment</h2>
                <section>
                    <label for="equipment">What Equipment Are You Leaving With Us?</label><br>
                      <textarea class="required" name="equipment" id="equipment"></textarea>
                      <br>

                      <label for="customerPWD">Do You Have A Password?</label>
                      <input type="text" autocapitalize="none" name="customerPWD" id="customerPWD">
                      <br>
                </section>

                <h2>How Did You Find Us</h2>
                <section>
                    <label for="hdyfu">Please let us know how you found us</label>
                      <cfselect class="required" queryPosition="below" query="hdyfu" display="method" name="hdyfu" id="hdyfu" tabindex="0" ><option>---Make A Selection---</option></cfselect>
                      <br>

                </section>
            </div>

<!--- Mobile Sig Capture CSS --->
<link rel="stylesheet" href="css/signature-pad.css">

    </h2>

  </cfform>

Answer 1

你可以尝试。

onFinished: function (event, currentIndex) {
  $("#form").submit();
}

Answer 2

我解决了这个问题，用提交按钮替换完成按钮。

on onStepChanged方法：

if (currentIndex === 5) { //if last step
   //remove default #finish button
   $('#wizard').find('a[href="#finish"]').remove(); 
   //append a submit type button
   $('#wizard .actions li:last-child').append('<button type="submit" id="submit" class="btn-large"><span class="fa fa-chevron-right"></span></button>');
}

在我的情况下工作正常!!

Answer 3

请尝试：

onFinished: function (event, currentIndex) {
  $("#form")[0].submit();
}

如果您使用console.log表单元素，则会看到2个元素被返回。

这就是为什么您需要选择第一个元素然后提交表格

Answer 4

我发现我必须从我的JavaScript中提取以下代码才能提交表单：

onFinishing: function (event, currentIndex)
{
    var form = $(this);

    // Disable validation on fields that are disabled.
    // At this point it's recommended to do an overall check (mean ignoring only disabled fields)
    //form.validate().settings.ignore = ":disabled";

    // Start validation; Prevent form submission if false
    //return form.valid();
}

Answer 5

如果您使用的是 AdminBSB Material Design，您可以试试这个

onFinished: function (event, currentIndex) {
  $(form).submit();
}

这是因为已经声明了“表单”。

Answer 6

为了让这些代码起作用，给你的表单一个类名，即“steps-basic”。试试下面的代码。

/* ------------------------------------------------------------------------------
$(function() {


    // Wizard examples
    // ------------------------------

    // Basic wizard setup
    $(".steps-basic").steps({
        headerTag: "h6",
        bodyTag: "fieldset",
        transitionEffect: "fade",
        titleTemplate: '<span class="number">#index#</span> #title#',
        labels: {
            finish: 'Submit'
        },
        onFinished: function (event, currentIndex) {
            alert("Alhamdulillah, Alkhery Member is already Registered.");
            $(".steps-basic").submit();
        }
    });


    // Async content loading
    $(".steps-async").steps({
        headerTag: "h6",
        bodyTag: "fieldset",
        transitionEffect: "fade",
        titleTemplate: '<span class="number">#index#</span> #title#',
        labels: {
            finish: 'Submit'
        },
        onContentLoaded: function (event, currentIndex) {
            $(this).find('select.select').select2();

            $(this).find('select.select-simple').select2({
                minimumResultsForSearch: '-1'
            });

            $(this).find('.styled').uniform({
                radioClass: 'choice'
            });

            $(this).find('.file-styled').uniform({
                wrapperClass: 'bg-warning',
                fileButtonHtml: '<i class="icon-googleplus5"></i>'
            });
        },
        onFinished: function (event, currentIndex) {
            alert("Alhamdulillah, Alkhery Member is already Registered.");
            $(".steps-basic").submit();
        }
    });


    // Saving wizard state
    $(".steps-state-saving").steps({
        headerTag: "h6",
        bodyTag: "fieldset",
        saveState: true,
        titleTemplate: '<span class="number">#index#</span> #title#',
        autoFocus: true,
        onFinished: function (event, currentIndex) {
            alert("Alhamdulillah, Alkhery Member is already Registered.");
            $(".steps-basic").submit();
        }
    });


    // Specify custom starting step
    $(".steps-starting-step").steps({
        headerTag: "h6",
        bodyTag: "fieldset",
        startIndex: 2,
        titleTemplate: '<span class="number">#index#</span> #title#',
        autoFocus: true,
        onFinished: function (event, currentIndex) {
            alert("Alhamdulillah, Alkhery Member is already Registered.");
            $(".steps-basic").submit();
        }
    });


    //
    // Wizard with validation
    //

    // Show form
    var form = $(".steps-validation").show();


    // Initialize wizard
    $(".steps-validation").steps({
        headerTag: "h6",
        bodyTag: "fieldset",
        transitionEffect: "fade",
        titleTemplate: '<span class="number">#index#</span> #title#',
        autoFocus: true,
        onStepChanging: function (event, currentIndex, newIndex) {

            // Allways allow previous action even if the current form is not valid!
            if (currentIndex > newIndex) {
                return true;
            }

            // Forbid next action on "Warning" step if the user is to young
            if (newIndex === 3 && Number($("#age-2").val()) < 18) {
                return false;
            }

            // Needed in some cases if the user went back (clean up)
            if (currentIndex < newIndex) {

                // To remove error styles
                form.find(".body:eq(" + newIndex + ") label.error").remove();
                form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
            }

            form.validate().settings.ignore = ":disabled,:hidden";
            return form.valid();
        },

        onStepChanged: function (event, currentIndex, priorIndex) {

            // Used to skip the "Warning" step if the user is old enough.
            if (currentIndex === 2 && Number($("#age-2").val()) >= 18) {
                form.steps("next");
            }

            // Used to skip the "Warning" step if the user is old enough and wants to the previous step.
            if (currentIndex === 2 && priorIndex === 3) {
                form.steps("previous");
            }
        },

        onFinishing: function (event, currentIndex) {
            form.validate().settings.ignore = ":disabled";
            return form.valid();
        },

        onFinished: function (event, currentIndex) {
            alert("Alhamdulillah, Alkhery Member is already Registered.");
            $(".steps-basic").submit();
        }
    });


    // Initialize validation
    $(".steps-validation").validate({
        ignore: 'input[type=hidden], .select2-input',
        errorClass: 'validation-error-label',
        successClass: 'validation-valid-label',
        highlight: function(element, errorClass) {
            $(element).removeClass(errorClass);
        },
        unhighlight: function(element, errorClass) {
            $(element).removeClass(errorClass);
        },
        errorPlacement: function(error, element) {
            if (element.parents('div').hasClass("checker") || element.parents('div').hasClass("choice") || element.parent().hasClass('bootstrap-switch-container') ) {
                if(element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                    error.appendTo( element.parent().parent().parent().parent() );
                }
                 else {
                    error.appendTo( element.parent().parent().parent().parent().parent() );
                }
            }
            else if (element.parents('div').hasClass('checkbox') || element.parents('div').hasClass('radio')) {
                error.appendTo( element.parent().parent().parent() );
            }
            else if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                error.appendTo( element.parent().parent() );
            }
            else if (element.parent().hasClass('uploader') || element.parents().hasClass('input-group')) {
                error.appendTo( element.parent().parent() );
            }
            else {
                error.insertAfter(element);
            }
        },
        rules: {
            email: {
                email: true
            }
        }
    });



    // Initialize plugins
    // ------------------------------

    // Select2 selects
    $('.select').select2();


    // Simple select without search
    $('.select-simple').select2({
        minimumResultsForSearch: '-1'
    });


    // Styled checkboxes and radios
    $('.styled').uniform({
        radioClass: 'choice'
    });


    // Styled file input
    $('.file-styled').uniform({
        wrapperClass: 'bg-warning',
        fileButtonHtml: '<i class="icon-googleplus5"></i>'
    });
    
});

Answer 7

您可以在表单中添加一个按钮并将显示设置为无，如下所示：

                <button type="submit" style="display:none;"></button>

然后在您的 Js 中，您可以触发对 onFinished 按钮的点击，如下所示：

    onFinished: function (event, currentIndex) {
        $('button[type="submit"]').trigger('click');
    }