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

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

2 个答案: