单击按钮后如何逐个显示表单域

Question

我在第一页中有一个字段，用户将在其中输入1位数字。输入该字段将隐藏的数字后，使用该按钮显示名为Fullname的下一个字段，但当我点击该按钮时，我的页面会刷新并进入第一页。

我需要当用户输入Fullname并单击按钮，然后下一个字段将显示名为Password的文件。 我在每个领域都有一个不同的按钮。

你能帮助我吗？

式

#password_form, #mobile_form{
display: none;
}

HTML

<div class="yoursection">
   <form name="user-confirmation">
      <label>Code no</label>
      <input type="text" name="code" id="code" placeholder="code" maxlength="1">     
   </form>
</div>
<div class="active_form" style="display: none;">
   <!--Name form********************************************************-->
   <form id="name_form" action="#" method="post" > 
      <label>Full name</label>
      <input type="text" name="fullname" id="fullname" placeholder="Full name">
      <input type="submit" name="submit" value="Continue to Password" id="continue_to_password">
   </form>
   <!--password form********************************************************-->
   <form id="password_form" action="#" method="post">
      <label>Password</label>
      <input type="password" name="password" id="password" placeholder="password name">
      <input type="submit" name="submit" value="Continue to mobile no" id="continue_to_mobile">
   </form>
   <!--mobile form********************************************************-->
   <form id="mobile_form" action="#" method="post">
      <label>Mobile number</label>
      <input type="text" name="mobile" id="mobile" placeholder="mobile no">
      <input type="submit" name="submit" value="Submit" id="submit">
   </form>
</div>
<!--active form-->

脚本

/*on key up calling ajax*/
$("#code").keyup(function () {
    $("form[name='user-confirmation']").submit();
});

/*Checking code */
$(function () {
    $('form[name="user-confirmation"]').on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: 'test4.php',
            data: $('form[name="user-confirmation-code"]').serialize(),
            success: function (data) {
                if (data.trim() === 'true') {
                    $('.yoursection').hide();
                    $('.active_form').show();
                } else {
                    $('#red-color').html(data);

                }
            }
        });
    });
});

/*When clicked on button*/
$('#continue_to_password').on('click', function () {
    $('#name_form').hide();
    $('#password_from').show();
});
$('#continue_to_mobile').on('click', function () {
    $('#password_from').hide();
    $('#mobile_form').show();
});

test4.php

This is for demo
<?php 
echo "true";
 ?>

Answer 1

删除表单标记，更改代码如下：

$("#code").keyup(function () {
        $.ajax({
            type: 'post',
            url: 'test4.php',
            data: $(this).val(),
            success: function (data) {
                if (data.trim() === 'true') {
                    $('.yoursection').hide();
                    $('.active_form').show();
                } else {
                    $('#red-color').html(data);

                }
            }
        });
    });
});

注意：每次按#code字段

中的键时，都会触发ajax

将您的输入更改为按钮只有一个登录表单

＆＃13;

＆＃13;

$("#code").keyup(function() {
  $('.active_form').show();
  //$.ajax({
  // type: 'post',
  // url: 'test4.php',
  //data: $(this).val(),
  //success: function(data) {
  // if (data.trim() === 'true') {
  //    $('.yoursection').hide();
  //   $('.active_form').show();
  //  } else {
  //   $('#red-color').html(data);

  // }
  // }
  // });
});
/*When clicked on button*/
$('body').on('click', '#continue_to_password', function(e) {
  $('#name_form').hide();

  $('#password_form').show();
});
$('#continue_to_mobile').on('click', function() {

  $('#password_form').hide();

  $('#mobile_form').show();
});

＆＃13;

.active_form,
#password_form,
#mobile_form {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="yoursection">
  <label>Code no</label>
  <input type="text" name="code" id="code" placeholder="code" maxlength="1">
</div>
<form class="active_form">
  <!--Name form********************************************************-->
  <div id="name_form">
    <label>Full name</label>
    <input type="text" name="fullname" id="fullname" placeholder="Full name">
    <button type="button" id="continue_to_password">Continue to Password</button>

  </div>
  <!--password form********************************************************-->
  <div id="password_form">
    <label>Password</label>
    <input type="password" name="password" id="password" placeholder="password name">
    <button type="button" id="continue_to_mobile">Continue to mobile no</button>

  </div>
  <!--mobile form********************************************************-->
  <div id="mobile_form">
    <label>Mobile number</label>
    <input type="text" name="mobile" id="mobile" placeholder="mobile no">
    <button type="submit">Submit</button>

  </div>
</form>
<!--active form-->

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将<button></button>标记用于现有的.on("click")活动。

<input type="submit">将始终重新加载您的网页。

Answer 3

我认为处理此问题的最佳方法是将表单存储在数组中。将step类添加到每个表单。

var steps = $('form.step');

然后简单地遍历每个表单。由于jQuery将按照它们在文档中出现的顺序获取元素，因此您无需进行任何配置。

var currentStep = 0;

$('input[type="submit"]').on('click', function () {

    currentStep += 1;
    HideSteps();

});

function HideSteps()
{
    for (var i = 0; i < $(steps).length; i++)
    {
        if (i != currentStep)
        {
            var disabledForm = $(steps)[i];
            $(disabledForm).css({ display: none });
        }

        else 
        {
            var activeForm = $(steps)[i];
            $(activeForm).css({ display: block });
        }
    }
}

要停用提交，请在提交事件中使用e.preventDefault()。

$('input[name="submit"]').on('click', function (event) {
    e.preventDefault();
});

Answer 4

尝试使用此滑动表单，在每个步骤后向用户显示一些验证反馈...

＆＃13;

＆＃13;

$(function() {
  /*
  number of fieldsets
  */
  var fieldsetCount = $('#formElem').children().length;

  /*
  current position of fieldset / navigation link
  */
  var current = 1;

  /*
  sum and save the widths of each one of the fieldsets
  set the final sum as the total width of the steps element
  */
  var stepsWidth = 0;
  var widths = new Array();
  $('#steps .step').each(function(i) {
    var $step = $(this);
    widths[i] = stepsWidth;
    stepsWidth += $step.width();
  });
  $('#steps').width(stepsWidth);

  /*
  to avoid problems in IE, focus the first input of the form
  */
  $('#formElem').children(':first').find(':input:first').focus();

  /*
  show the navigation bar
  */
  $('#navigation').show();

  /*
  when clicking on a navigation link 
  the form slides to the corresponding fieldset
  */
  $('#navigation a').bind('click', function(e) {
    var $this = $(this);
    var prev = current;
    $this.closest('ul').find('li').removeClass('selected');
    $this.parent().addClass('selected');
    /*
    we store the position of the link
    in the current variable	
    */
    current = $this.parent().index() + 1;

    $('#steps').stop().animate({
      marginLeft: '-' + widths[current - 1] + 'px'
    }, 500, function() {
      if (current == fieldsetCount)
        validateSteps();
      else
        validateStep(prev);
      $('#formElem').children(':nth-child(' + parseInt(current) + ')').find(':input:first').focus();
    });
    e.preventDefault();
  });

  /*
  clicking on the tab (on the last input of each fieldset), makes the form
  slide to the next step
  */
  $('#formElem > fieldset').each(function() {
    var $fieldset = $(this);
    $fieldset.children(':last').find(':input').keydown(function(e) {
      if (e.which == 9) {
        $('#navigation li:nth-child(' + (parseInt(current) + 1) + ') a').click();
        /* force the blur for validation */
        $(this).blur();
        e.preventDefault();
      }
    });
  });

  /*
  validates errors on all the fieldsets
  records if the Form has errors in $('#formElem').data()
  */
  function validateSteps() {
    var FormErrors = false;
    for (var i = 1; i < fieldsetCount; ++i) {
      var error = validateStep(i);
      if (error == -1)
        FormErrors = true;
    }
    $('#formElem').data('errors', FormErrors);
  }

  /*
  validates one fieldset
  and returns -1 if errors found, or 1 if not
  */
  function validateStep(step) {
    if (step == fieldsetCount) return;

    var error = 1;
    var hasError = false;
    $('#formElem').children(':nth-child(' + parseInt(step) + ')').find(':input:not(button)').each(function() {
      var $this = $(this);
      var valueLength = jQuery.trim($this.val()).length;

      if (valueLength == '') {
        hasError = true;
        $this.css('background-color', '#FFEDEF');
      } else
        $this.css('background-color', '#FFFFFF');
    });
    var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a');
    $link.parent().find('.error,.checked').remove();

    var valclass = 'checked';
    if (hasError) {
      error = -1;
      valclass = 'error';
    }
    $('<span class="' + valclass + '"></span>').insertAfter($link);

    return error;
  }

  /*
  if there are errors don't allow the user to submit
  */
  $('#registerButton').bind('click', function() {
    if ($('#formElem').data('errors')) {
      alert('Please correct the errors in the Form');
      return false;
    }
  });
});

＆＃13;

* {
  margin: 0px;
  padding: 0px;
}

body {
  color: #444444;
  font-size: 13px;
  background: #f2f2f2;
  font-family: "Century Gothic", Helvetica, sans-serif;
}

#content {
  margin: 15px auto;
  text-align: center;
  width: 600px;
  position: relative;
  height: 100%;
}

#wrapper {
  -moz-box-shadow: 0px 0px 3px #aaa;
  -webkit-box-shadow: 0px 0px 3px #aaa;
  box-shadow: 0px 0px 3px #aaa;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 2px solid #fff;
  background-color: #f9f9f9;
  width: 600px;
  overflow: hidden;
}

#steps {
  width: 600px;
  /*height:320px;*/
  overflow: hidden;
}

.step {
  float: left;
  width: 600px;
  /*height:320px;*/
}

#navigation {
  height: 45px;
  background-color: #e9e9e9;
  border-top: 1px solid #fff;
  -moz-border-radius: 0px 0px 10px 10px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

#navigation ul {
  list-style: none;
  float: left;
  margin-left: 22px;
}

#navigation ul li {
  float: left;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  position: relative;
  margin: 0px 2px;
}

#navigation ul li a {
  display: block;
  height: 45px;
  background-color: #444;
  color: #777;
  outline: none;
  font-weight: bold;
  text-decoration: none;
  line-height: 45px;
  padding: 0px 20px;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  background: #f0f0f0;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(240, 240, 240)), color-stop(0.55, rgb(227, 227, 227)), color-stop(0.78, rgb(240, 240, 240)));
  background: -moz-linear-gradient( center bottom, rgb(240, 240, 240) 9%, rgb(227, 227, 227) 55%, rgb(240, 240, 240) 78%)
}

#navigation ul li a:hover,
#navigation ul li.selected a {
  background: #d8d8d8;
  color: #666;
  text-shadow: 1px 1px 1px #fff;
}

span.checked {
  background: transparent url(../images/checked.png) no-repeat top left;
  position: absolute;
  top: 0px;
  left: 1px;
  width: 20px;
  height: 20px;
}

span.error {
  background: transparent url(../images/error.png) no-repeat top left;
  position: absolute;
  top: 0px;
  left: 1px;
  width: 20px;
  height: 20px;
}

#steps form fieldset {
  border: none;
  padding-bottom: 20px;
}

#steps form legend {
  text-align: left;
  background-color: #f0f0f0;
  color: #666;
  font-size: 24px;
  text-shadow: 1px 1px 1px #fff;
  font-weight: bold;
  float: left;
  width: 590px;
  padding: 5px 0px 5px 10px;
  margin: 10px 0px;
  border-bottom: 1px solid #fff;
  border-top: 1px solid #d9d9d9;
}

#steps form p {
  float: left;
  clear: both;
  margin: 5px 0px;
  background-color: #f4f4f4;
  border: 1px solid #fff;
  width: 400px;
  padding: 10px;
  margin-left: 100px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 3px #aaa;
  -webkit-box-shadow: 0px 0px 3px #aaa;
  box-shadow: 0px 0px 3px #aaa;
}

#steps form p label {
  width: 160px;
  float: left;
  text-align: right;
  margin-right: 15px;
  line-height: 26px;
  color: #666;
  text-shadow: 1px 1px 1px #fff;
  font-weight: bold;
}

#steps form input:not([type=radio]),
#steps form textarea,
#steps form select {
  background: #ffffff;
  border: 1px solid #ddd;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  outline: none;
  padding: 5px;
  width: 200px;
  float: left;
}

#steps form input:focus {
  -moz-box-shadow: 0px 0px 3px #aaa;
  -webkit-box-shadow: 0px 0px 3px #aaa;
  box-shadow: 0px 0px 3px #aaa;
  background-color: #FFFEEF;
}

#steps form p.submit {
  background: none;
  border: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#steps form button {
  border: none;
  outline: none;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  color: #ffffff;
  display: block;
  cursor: pointer;
  margin: 0px auto;
  clear: both;
  padding: 7px 25px;
  text-shadow: 0 1px 1px #777;
  font-weight: bold;
  font-family: "Century Gothic", Helvetica, sans-serif;
  font-size: 22px;
  -moz-box-shadow: 0px 0px 3px #aaa;
  -webkit-box-shadow: 0px 0px 3px #aaa;
  box-shadow: 0px 0px 3px #aaa;
  background: #4797ED;
}

#steps form button:hover {
  background: #d8d8d8;
  color: #666;
  text-shadow: 1px 1px 1px #fff;
}

span.reference {
  position: fixed;
  left: 5px;
  top: 5px;
  font-size: 10px;
  text-shadow: 1px 1px 1px #fff;
}

span.reference a {
  color: #555;
  text-decoration: none;
  text-transform: uppercase;
}

span.reference a:hover {
  color: #000;
}

h1 {
  color: #ccc;
  font-size: 36px;
  text-shadow: 1px 1px 1px #fff;
  padding: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="content">
  <div id="wrapper">
    <div id="steps">
      <form id="formElem" name="formElem" action="" method="post">
        <fieldset class="step">
          <legend>Account</legend>
          <p><label for="username">User name</label><input id="username" name="username" /></p>
          <p><label for="email">Email</label><input id="email" name="email" placeholder="mominriyadh@gmail.com" type="email" AUTOCOMPLETE=OFF/></p>
          <p><label for="password">Password</label><input id="password" name="password" type="password" AUTOCOMPLETE=OFF/></p>
        </fieldset>
        <fieldset class="step">
          <legend>Personal Details</legend>
          <p><label for="name">Full Name</label><input id="name" name="name" type="text" AUTOCOMPLETE=OFF/></p>
          <p><label for="country">Country</label><input id="country" name="country" type="text" AUTOCOMPLETE=OFF/></p>
          <p><label for="phone">Phone</label><input id="phone" name="phone" placeholder="e.g. +351215555555" type="tel" AUTOCOMPLETE=OFF/></p>
          <p><label for="website">Website</label><input id="website" name="website" placeholder="e.g. http://www.codrops.com" type="tel" AUTOCOMPLETE=OFF/></p>
        </fieldset>
        <fieldset class="step">
          <legend>Payment</legend>
          <p><label for="cardtype">Card</label><select id="cardtype" name="cardtype"><option>Visa</option><option>Mastercard</option><option>American Express</option></select></p>
          <p><label for="cardnumber">Card number</label><input id="cardnumber" name="cardnumber" type="number" AUTOCOMPLETE=OFF/></p>
          <p><label for="secure">Security code</label><input id="secure" name="secure" type="number" AUTOCOMPLETE=OFF/></p>
          <p><label for="namecard">Name on Card</label><input id="namecard" name="namecard" type="text" AUTOCOMPLETE=OFF/></p>
        </fieldset>
        <fieldset class="step">
          <legend>Settings</legend>
          <p><label for="newsletter">Newsletter</label><select id="newsletter" name="newsletter"><option value="Daily" selected>Daily</option><option value="Weekly">Weekly</option><option value="Monthly">Monthly</option><option value="Never">Never</option></select></p>
          <p><label for="updates">Updates</label><select id="updates" name="updates"><option value="1" selected>Package 1</option><option value="2">Package 2</option><option value="0">Don't send updates</option>
 </select></p>
          <p><label for="tagname">Newsletter Tag</label><input id="tagname" name="tagname" type="text" AUTOCOMPLETE=OFF/></p>
        </fieldset>
        <fieldset class="step">
          <legend>Confirm</legend>
          <p>Everything in the form was correctly filled if all the steps have a green checkmark icon. A red checkmark icon indicates that some field is missing or filled out with invalid data. In this last step the user can confirm the submission of the
            form. </p>
          <p class="submit"><button id="registerButton" type="submit">Register</button></p>
        </fieldset>
      </form>
    </div>
    <div id="navigation" style="display:none;">
      <ul>
        <li class="selected"><a href="#">Account</a></li>
        <li><a href="#">Personal Details</a></li>
        <li><a href="#">Payment</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Confirm</a></li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;