jQuery的步骤表单提交

Question

我想实现jQuery的步骤插件这里找到：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

我发现我已经从我的JavaScript elimatate下面的代码，使其提交表单：

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 2

你可以试试。

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

Answer 3

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

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

工作正常！