Jquery-Step Form Submit

Question

I am trying to implement JQuery-steps plugin found here: https://github.com/rstaib/jquery-steps

I cannot figure out how to submit my form. I am not using field validation at this point.

Here is my 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>

Here is my form:

<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

TRY THIS :

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

If you console.log form element, you will see 2 elements being returned.

That's why you need to select the first element and then submit the form

Answer 2

I found I had to elimatate the following code from my JavaScript to make it submit the form:

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 3

you can try.

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

Answer 4

I solve this problem replace finish button by an submit button.

On onStepChanged method:

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

Works fine in my case!!