Javascript Jquery步骤表单提交

我正在尝试实现以下JQuery步骤插件：

我不知道如何提交我的表格。我现在没有使用字段验证

这是我的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>

$（函数（）
{
$（“#向导”）。步骤({
头像：“h2”，
bodyTag:“节”，
过渡效果：“slideLeft”，
onFinishing：函数（事件、当前索引）
{
变量形式=$（此）；
//对已禁用的字段禁用验证。
//此时，建议进行全面检查（即仅忽略禁用的字段）
//form.validate（）.settings.ignore=“：disabled”；
//开始验证；如果为false，则阻止表单提交
//返回表单.valid（）；
},
onFinished：函数（事件、当前索引）
{
变量形式=$（此）；
//提交表格输入
表单提交（）；
}
});
});

这是我的表格：

<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>

你的信息
你的全名
电子邮件地址
您的完整邮寄地址
手机号码
计算机问题
请提供您的问题的详细说明

你的设备
你要把什么设备留给我们？



你有密码吗？


你是怎么找到我们的
请告诉我们你是如何找到我们的
---挑选---

我发现我必须从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();
}

---

我发现我必须从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();
}

你可以试试

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

你可以试试

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

---

我解决了这个问题，用submit按钮替换finish按钮

在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>');
}

if（currentIndex==5）{//if最后一步
//删除默认的#完成按钮
$（“#向导”）.find（'a[href=“#finish”]”）.remove（）；
//附加提交类型按钮
$（'#wizard.actions li:last child'）.append（''）；
}

---

在我的情况下效果很好

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

在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>');
}

if（currentIndex==5）{//if最后一步
//删除默认的#完成按钮
$（“#向导”）.find（'a[href=“#finish”]”）.remove（）；
//附加提交类型按钮
$（'#wizard.actions li:last child'）.append（''）；
}

在我的情况下效果很好

试试这个：

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

如果使用console.log表单元素，您将看到返回2个元素

这就是为什么需要选择第一个元素，然后提交表单的原因尝试以下操作：

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

如果使用console.log表单元素，您将看到返回2个元素

---

这就是为什么您需要选择第一个元素，然后提交表单的原因。

如果您使用的是AdminBSB Material Design，您可以尝试以下方法

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

---

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

如果您使用的是AdminBSB材质设计，您可以尝试此方法

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

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

非常感谢。我使用了$（“#表单”）.submit（）；在我看来，非常感谢你。我使用了$（“#表单”）.submit（）；在我的职责范围内