javascript - 单击按钮后如何逐一显示表单字段

Question

我在第一页有一个字段，用户将在其中输入一位数字。输入数字后，该字段将隐藏并显示带有按钮的名为 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

去掉form标签，改代码如下:

$("#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

将您的输入更改为按钮只有一种登录形式

$("#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();
});

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

<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-->