3_data.html

<div class="row">
  <div class="col-xs-12">
    <ul class="wizard-steps">
      <li class="selected">
        <a href="wizard/1.html">
          <span class="fa fa-user" aria-hidden="true"></span>
          <span>Personal Particulars</span>
        </a>
      </li>
      <li class="selected">
        <a href="wizard/2.html">
          <span class="fa fa-wrench" aria-hidden="true"></span>
          <span>Skills & Qualifications</span>
        </a>
      </li>
      <li class="selected">
        <a href="javascript:void(0);">
          <span class="fa fa-user" aria-hidden="true"></span>
          <span>Background Check</span>
        </a>
      </li>
      <li>
        <span class="fa fa-lock" aria-hidden="true"></span>
        <span>Submit Documents</span>
      </li>
      <li>
        <span class="fa fa-file-text-o" aria-hidden="true"></span>
        <span>Information Declaration</span>
      </li>
    </ul>
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <div class="title-form-personal">As our seniors can be very vulnerable, it is therefore necessary for
      us to conduct this screening.
    </div>
    <form action="#" class="about-info personal">
      <h3 class="title">Criminal Record Check</h3>

      <p>If your answer is Yes, please give details of the nature and circumstances of the crime(s), the
        date and the location in which each crime occurred.</p>
      <ul class="check-question clearfix">
        <li>
          <label>
            <input type="radio" name="language" value=""/><span></span> No
          </label>
        </li>
        <li>
          <label>
            <input type="radio" name="language" value=""/><span></span> Yes
          </label>
        </li>
      </ul>
      <p>If your answer is Yes, please give details of the nature and circumstances of the crime(s), the
        date and the location in which each crime occurred.</p>
      <textarea name="summary" id="summary" cols="30" rows="10"></textarea>

      <p>If your answer is No, you, hereby declare that you have never been convicted of any
        criminal offence during your stay in Singapore and other countries.</p>

      <p class="agreement">I understand that an electronic signature has the same legal effect and can be
        enforced in the
        same way as written signature. </p>
      <ul class="check-question clearfix">
        <li>
          <label>
            <input type="checkbox" name="language" value=""/><span></span> By checking this box and typing my name
            below, I am electronically signing my application.
          </label>
        </li>
      </ul>
      <div class="relationship">
        <label for="full-name">Full Name</label>
        <input type="text" name="full-name" id="full-name">
      </div>
      <h3 class="title">Contact Reference No. 1 </h3>
      <p>Kindly provide details of 2 of your previous job/character references. We will contact them
        to verify information, such as your skills and experience.</p>
      <ul id="contact-reference">
        <li class="half">
          <ul>
            <li>
              <label for="name">Name</label>
              <input type="text" value="" placeholder="" name="name" id="name">
            </li>
            <li>
              <label for="relationships">Relationships</label>
              <input type="text" value="" placeholder="" name="relationships" id="relationships">
            </li>
          </ul>
        </li>
        <li class="half">
          <ul>
            <li>
              <label for="contact-number">Contact Number</label>
              <input type="text" value="" placeholder="" name="contact-number" id="contact-number">
            </li>
            <li>
              <label for="email">Email address</label>
              <input type="email" value="" placeholder="" name="email" id="email">
            </li>
          </ul>
        </li>
      </ul>

      <h3 class="title">Contact Reference No. 2 </h3>
      <ul id="contact-reference2">
        <li class="half">
          <ul>
            <li>
              <label for="name2">Name</label>
              <input type="text" value="" placeholder="" name="name2" id="name2">
            </li>
            <li>
              <label for="relationships2">Relationships</label>
              <input type="text" value="" placeholder="" name="relationships2" id="relationships2">
            </li>
          </ul>
        </li>
        <li class="half">
          <ul>
            <li>
              <label for="contact-number">Contact Number</label>
              <input type="text" value="" placeholder="" name="contact-number" id="contact-number">
            </li>
            <li>
              <label for="email">Email address</label>
              <input type="email" value="" placeholder="" name="email" id="email">
            </li>
          </ul>
        </li>
      </ul>

    </form>
    <div class="clearfix">
      <a href="2_data.html" class="submit btn-main btn-back">Back</a>
      <a href="4_data.html" class="submit btn-main btn-next">Next</a>
    </div>
  </div>
</div>
<script>
  $(".submit").click(function(e){
    e.preventDefault();
    var link = $(this).attr("href");

    $.get( link, function( data ) {
      $('html, body').animate({
        scrollTop: $(".update-details").offset().top
      }, 1000);

      setTimeout(function(){
        $(".wizard-frame").fadeOut(function(){
          $(".wizard-frame").html( data).fadeIn();
        })
      }, 1000);

    });

  });
</script>