如何一次只显示一个文本框，然后单击以显示下一个显示下一个输入字段

Question

我有三个字段和一个下一步按钮。 单击下一步按钮后，我必须逐一显示每个字段。 意味着我一次只能显示一个字段。 例如。 单击下一个按钮后，第一个文本框显示为下一个按钮，然后在第三个文本上显示具有下一个按钮的第二个文本框，但这次没有下一个按钮。 它将显示提交按钮。 您能帮我这个忙吗？

 .steps{ max-width:500px; height:auto; margin:0 auto; padding:70px 0; background:#ffffff; border:1px solid #e1e8f2; position:relative; text-align:center; } label { display: block; } .field-set { text-align: left; } 

 <div class="steps"> <p class="form_title">Please Fill The field Bellow</p> <form action="#" method="post" autocomplete="off"> <div class="field-set"> <label>name</label> <input type="text" id="name" name="name" placeholder="Enter You Name"/> </div> <div class="field-set"> <label>Email</label> <input type="email" id="email" name="email" placeholder="Enter You Email"/> </div> <div class="field-set"> <label>mobile</label> <input type="text" id="mob" name="mob" placeholder="Enter Your mobile no"/> </div> <div class="field-set"> <input type="submit" name="next" value="next" id="click_next"> </div> </form> </div> 

Answer 1

尝试类似

var count = $(".field-set").length - 1;
var countshow = 1;
$("#click_next").click(function(e) {
  e.preventDefault()
  $(".field-set").eq((countshow - 1)).hide();
  if (count > countshow) {
    $(".field-set").eq(countshow).show();
    countshow++;
  } else {
    $("form").unbind("submit").submit();
  }
})

我也改变了你的一些CSS。

.field-set {
  text-align: left;
  display: none;
}

.field-set:first-of-type,
.field-set:last-of-type {
  display: block;
}

 var count = $(".field-set").length - 1; var countshow = 1; $("#click_next").click(function(e) { e.preventDefault() $(".field-set").eq((countshow - 1)).hide(); if (count > countshow) { $(".field-set").eq(countshow).show(); if ((count - 1) == countshow) {$(this).val("sumbit")} } else { $("form").unbind("submit").submit(); } countshow++; }) 

 .steps { max-width: 500px; height: auto; margin: 0 auto; padding: 70px 0; background: #ffffff; border: 1px solid #e1e8f2; position: relative; text-align: center; } label { display: block; } .field-set { text-align: left; display: none; } .field-set:first-of-type, .field-set:last-of-type { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- start Form Steps --> <div class="steps"> <p class="form_title">Please Fill The field Bellow</p> <form action="#" method="post" autocomplete="off"> <div class="field-set"> <label>name</label> <input type="text" id="name" name="name" placeholder="Enter You Name" /> </div> <div class="field-set"> <label>Email</label> <input type="email" id="email" name="email" placeholder="Enter You Email" /> </div> <div class="field-set"> <label>mobile</label> <input type="text" id="mob" name="mob" placeholder="Enter Your mobile no" /> </div> <div class="field-set"> <input type="submit" name="next" value="next" id="click_next"> </div> </form> </div> <!-- End Form Steps --> 

Answer 2

尝试这样的事情：

 $(document).ready(function(){ var step = 1; $('#btn').click(function(){ if( step < 5 ) { $('.txt').eq(step - 1).hide(); $('.txt').eq(step).show(); step++; } else { /*Submit the form here*/ } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="txt" placeholder="1"> <input class="txt" style="display:none;" placeholder="2"> <input class="txt" style="display:none;" placeholder="3"><input class="txt" style="display:none;" placeholder="4"> <input class="txt" style="display:none;" placeholder="5"> <input type="button" value="Next" id="btn">