多步形式href到字段集

时间:2017-11-30 22:09:01

标签: javascript jquery html css

我正在处理多步表单,我无法添加链接。我想在进度条中添加链接,所以当我点击进度条1它会将我发送到fieldset 1,如果点击数字进度条3它将被发送到符合3的字段集。

我给了fieldset一个Id,但当我在进度条中添加链接时,它只对第一个字段集起作用,其他字段集不起作用 I put my code Here。下一个和上一个正在工作,但我想在进度条中添加链接,这样我就可以直接进入我想去的步骤。

HTML:

 <form id="msform">
  <!-- progressbar -->
  <ul id="progressbar">
    <a href="#1"><li class="active">Account Setup</li></a>
    <a href="#2"> <li>Social Profiles</li></a>
    <a href="#3"> <li>Personal Details</li></a>
  </ul>
  <!-- fieldsets -->
  <fieldset id="1">
    <h2 class="fs-title">Create your account</h2>
    <h3 class="fs-subtitle">This is step 1</h3>
    <input type="text" name="email" placeholder="Email"/>
    <input type="password" name="pass" placeholder="Password" />
    <input type="password" name="cpass" placeholder="Confirm Password" />
    <input type="button" name="next" class="next action-button" value="Next" />
  </fieldset>
  <fieldset id="2">
    <h2 class="fs-title">Social Profiles</h2>
    <h3 class="fs-subtitle">Your presence on the social network</h3>
    <input type="text" name="twitter" placeholder="Twitter" />
    <input type="text" name="facebook" placeholder="Facebook" />
    <input type="text" name="gplus" placeholder="Google Plus" />
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
  </fieldset>
  <fieldset id="3">
    <h2 class="fs-title">Personal Details</h2>
    <h3 class="fs-subtitle">We will never sell it</h3>
    <input type="text" name="fname" placeholder="First Name" />
    <input type="text" name="lname" placeholder="Last Name" />
    <input type="text" name="phone" placeholder="Phone" />
    <textarea name="address" placeholder="Address"></textarea>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="submit" name="submit" class="submit action-button" value="Submit" />
  </fieldset>
</form>
 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>

Akkording html和css聊天这是一个javascript问题。

0 个答案:

没有答案