CODEWITHSUNDEEP
javascriptjquery
Jason Doe
Jason Doe

Reputation: 25

jQuery Multi-Step Wizard Form

I trying to submit a form (perl script) with a demo of jQuery Multi-Step Wizard Form but for the life of me I cannot get it to submit to my test script NoScript.pl.

I have read the documentation and really cant seem to figure it out any help is appreciated.

window.onload = function() {

  $(function() {
    var $signupForm = $('#SignupForm');

    $signupForm.validationEngine();

    $signupForm.formToWizard({
      submitButton: 'SaveAccount',
      showProgress: true, //default value for showProgress is also true
      nextBtnName: 'Forward >>',
      prevBtnName: '<< Previous',
      showStepNo: true,
      validateBeforeNext: function() {
        return $signupForm.validationEngine('validate');
      }
    });


    $('#txt_stepNo').change(function() {
      $signupForm.formToWizard('GotoStep', $(this).val());
    });

    $('#btn_next').click(function() {
      $signupForm.formToWizard('NextStep');
    });

    $('#btn_prev').click(function() {
      $signupForm.formToWizard('PreviousStep');
    });
  });


}
body {
  font-family: Lucida Sans, Arial, Helvetica, Sans-Serif;
  font-size: 13px;
  margin: 20px;
}

#header {
  text-align: center;
  border-bottom: solid 1px #b2b3b5;
  margin: 0 0 20px 0;
}

fieldset {
  border: none;
  width: 320px;
}

legend {
  font-size: 18px;
  margin: 0px;
  padding: 10px 0px;
  color: #b0232a;
  font-weight: bold;
}

label {
  display: block;
  margin: 15px 0 5px;
}

input[type=text],
input[type=password] {
  width: 300px;
  padding: 5px;
  border: solid 1px #000;
}

button,
.prev,
.next {
  background-color: #b0232a;
  padding: 5px 10px;
  color: #fff;
  text-decoration: none;
}

button:hover,
.prev:hover,
.next:hover {
  background-color: #000;
  text-decoration: none;
}

button {
  border: none;
}

#controls {
  background: #eee;
  box-shadow: 0 0 16px #999;
  height: 30px;
  position: fixed;
  padding: 10px;
  top: 0;
  left: 0;
  width: 100%;
  dex: 1
}

#controls h1 {
  color: #666;
  display: inline-block;
  margin: 0 0 8px 0
}

#controls input[type=text] {
  border-color: #999;
  margin: 0 25px;
  width: 120px
}

#steps {
  margin: 80px 0 0 0
}

.prev {
  float: left
}

.next {
  float: right
}

.steps {
  list-style: none;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0
}

.steps li {
  color: #b0b1b3;
  font-size: 24px;
  float: left;
  padding: 10px;
  transition: all -moz-transition:all .3s;
  -webkit-transition: all -o-transition:all .3s
}

.steps li span {
  font-size: 11px;
  display: block
}

.steps li.current {
  color: #000
}

.breadcrumb {
  height: 37px
}

.breadcrumb li {
  background: #eee;
  font-size: 14px
}

.breadcrumb li.current:after {
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 6px solid;
  content: ' ';
  position: absolute;
  top: 0;
  right: -6px
}

.breadcrumb li.current {
  background: #666;
  color: #eee;
  position: relative
}

.breadcrumb li:last-child:after {
  border: none
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/artoodetoo/formToWizard/v0.0.2/jquery.formtowizard.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.min.js"></script>

<form id="SignupForm" action="http://www.smldesign.net/cgi-bin/NoScript.pl" method="post">

  <fieldset>
    <legend>Account information</legend>
    <label for="Name">Name</label>
    <input id="Name" type="text" class="validate[required]" />
    <label for="Email">Email</label>
    <input id="Email" type="text" class="validate[custom[email],required]" />
    <label for="Password">Password</label>
    <input id="Password" type="password" />
  </fieldset>
  <fieldset>
    <legend>Company information</legend>
    <label for="CompanyName">Company Name</label>
    <input id="CompanyName" type="text" class="validate[required]" />
    <label for="Website">Website</label>
    <input id="Website" type="text" />
    <label for="CompanyEmail">CompanyEmail</label>
    <input id="CompanyEmail" type="text" />
  </fieldset>
  <fieldset>
    <legend>Billing information</legend>
    <label for="NameOnCard">Name on Card</label>
    <input id="NameOnCard" type="text" />
    <label for="CardNumber">Card Number</label>
    <input id="CardNumber" type="text" />
    <label for="CreditcardMonth">Expiration</label>
    <select id="CreditcardMonth">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
    </select>
    <select id="CreditcardYear">>
      <option value="2018">2018</option>
      <option value="2019">2019</option>
    </select>
    <label for="Address1">Address 1</label>
    <input id="Address1" type="text" />
    <label for="Address2">Address 2</label>
    <input id="Address2" type="text" />
    <label for="City">City</label>
    <input id="City" type="text" />
    <label for="City">Country</label>
    <select id="Country">
      <option value="CA">Canada</option>
      <option value="US">United States of America</option>
      <option value="UM">United States Minor Outlying Islands</option>
      <option value="VI">United States Virgin Islands</option>

    </select>
  </fieldset>
  <p>
    <input id="SaveAccount" type="button" value="Submit form" />
  </p>
</form>

Upvotes: 0

Views: 4091

Answers (2)

Doug Ross
Doug Ross

Reputation: 46

I believe the above answer is correct.

At no point does it appear that you are actually forcing your FORM that posts the Perl script to execute a submit.

The jQuery submit method can do that for you.

p.s., your credit-card submission form appears to be non-TLS

Upvotes: 0

Dalton Whyte
Dalton Whyte

Reputation: 717

To fix this issue have you attempted using jQuery's $.submit() function when the final step is called. This would be:

$("#SaveAccount").click(function() {
    $("#SignupForm").submit();
}

Remember the "Submit Form" button only shows up at the final step, you just need to add this snippet of code to your Javascript after the $('#btn_prev').click(function(){...} function.

window.onload = function() {

  $(function() {
    var $signupForm = $('#SignupForm');

    $signupForm.validationEngine();

    $signupForm.formToWizard({
      submitButton: 'SaveAccount',
      showProgress: true, //default value for showProgress is also true
      nextBtnName: 'Forward >>',
      prevBtnName: '<< Previous',
      showStepNo: true,
      validateBeforeNext: function() {
        return $signupForm.validationEngine('validate');
      }
    });


    $('#txt_stepNo').change(function() {
      $signupForm.formToWizard('GotoStep', $(this).val());
    });

    $('#btn_next').click(function() {
      $signupForm.formToWizard('NextStep');
    });

    $('#btn_prev').click(function() {
      $signupForm.formToWizard('PreviousStep');
    });

    $("#SaveAccount").click(function() {
      $("#SignupForm").submit();
    });
  });


}
body {
  font-family: Lucida Sans, Arial, Helvetica, Sans-Serif;
  font-size: 13px;
  margin: 20px;
}

#header {
  text-align: center;
  border-bottom: solid 1px #b2b3b5;
  margin: 0 0 20px 0;
}

fieldset {
  border: none;
  width: 320px;
}

legend {
  font-size: 18px;
  margin: 0px;
  padding: 10px 0px;
  color: #b0232a;
  font-weight: bold;
}

label {
  display: block;
  margin: 15px 0 5px;
}

input[type=text],
input[type=password] {
  width: 300px;
  padding: 5px;
  border: solid 1px #000;
}

button,
.prev,
.next {
  background-color: #b0232a;
  padding: 5px 10px;
  color: #fff;
  text-decoration: none;
}

button:hover,
.prev:hover,
.next:hover {
  background-color: #000;
  text-decoration: none;
}

button {
  border: none;
}

#controls {
  background: #eee;
  box-shadow: 0 0 16px #999;
  height: 30px;
  position: fixed;
  padding: 10px;
  top: 0;
  left: 0;
  width: 100%;
  dex: 1
}

#controls h1 {
  color: #666;
  display: inline-block;
  margin: 0 0 8px 0
}

#controls input[type=text] {
  border-color: #999;
  margin: 0 25px;
  width: 120px
}

#steps {
  margin: 80px 0 0 0
}

.prev {
  float: left
}

.next {
  float: right
}

.steps {
  list-style: none;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0
}

.steps li {
  color: #b0b1b3;
  font-size: 24px;
  float: left;
  padding: 10px;
  transition: all -moz-transition:all .3s;
  -webkit-transition: all -o-transition:all .3s
}

.steps li span {
  font-size: 11px;
  display: block
}

.steps li.current {
  color: #000
}

.breadcrumb {
  height: 37px
}

.breadcrumb li {
  background: #eee;
  font-size: 14px
}

.breadcrumb li.current:after {
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 6px solid;
  content: ' ';
  position: absolute;
  top: 0;
  right: -6px
}

.breadcrumb li.current {
  background: #666;
  color: #eee;
  position: relative
}

.breadcrumb li:last-child:after {
  border: none
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/artoodetoo/formToWizard/v0.0.2/jquery.formtowizard.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.min.js"></script>

<form id="SignupForm" action="http://www.smldesign.net/cgi-bin/NoScript.pl" method="post">

  <fieldset>
    <legend>Account information</legend>
    <label for="Name">Name</label>
    <input id="Name" type="text" class="validate[required]" />
    <label for="Email">Email</label>
    <input id="Email" type="text" class="validate[custom[email],required]" />
    <label for="Password">Password</label>
    <input id="Password" type="password" />
  </fieldset>
  <fieldset>
    <legend>Company information</legend>
    <label for="CompanyName">Company Name</label>
    <input id="CompanyName" type="text" class="validate[required]" />
    <label for="Website">Website</label>
    <input id="Website" type="text" />
    <label for="CompanyEmail">CompanyEmail</label>
    <input id="CompanyEmail" type="text" />
  </fieldset>
  <fieldset>
    <legend>Billing information</legend>
    <label for="NameOnCard">Name on Card</label>
    <input id="NameOnCard" type="text" />
    <label for="CardNumber">Card Number</label>
    <input id="CardNumber" type="text" />
    <label for="CreditcardMonth">Expiration</label>
    <select id="CreditcardMonth">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
    </select>
    <select id="CreditcardYear">>
      <option value="2018">2018</option>
      <option value="2019">2019</option>
    </select>
    <label for="Address1">Address 1</label>
    <input id="Address1" type="text" />
    <label for="Address2">Address 2</label>
    <input id="Address2" type="text" />
    <label for="City">City</label>
    <input id="City" type="text" />
    <label for="City">Country</label>
    <select id="Country">
      <option value="CA">Canada</option>
      <option value="US">United States of America</option>
      <option value="UM">United States Minor Outlying Islands</option>
      <option value="VI">United States Virgin Islands</option>

    </select>
  </fieldset>
  <p>
    <input id="SaveAccount" type="button" value="Submit form" />
  </p>
</form>

Upvotes: 1

Related Questions