單擊按鈕后如何一一顯示表單字段

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

將輸入更改為按鈕，只有一種登錄形式

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

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()事件上使用e.preventDefault() 。

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

Answer 4

嘗試使用此滑動表單，該表單在每個步驟之后都會向用戶顯示一些驗證反饋...

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

 * { 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; } 

 <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="eg +351215555555" type="tel" AUTOCOMPLETE=OFF/></p> <p><label for="website">Website</label><input id="website" name="website" placeholder="eg 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>