Question

我是这个HTML

<div class="phoneVerification">
    <h1><span style="border-bottom:2px solid">Phone Verification</span></h1>
    <div class="phoneForm">
      <form class="form-inline" role="form" action="javascript:void(0);" method="post">
        <div class="form-group">
          <label for="phone">Phone</label>
          <input type="text" class="form-control" id="phoneOTP" />
          <button type="submit" class="btn btn-success">Send OTP</button>
        </div>
      </form>
    </div>
    <div class="OTPForm">
      <form class="form-inline" role="form" action="javascript:void(0);" method="post">
        <div class="form-group">
          <label for="phone">OTP</label>
          <input type="text" class="form-control" id="phoneOTP" />
          <button type="submit" class="btn btn-success">Confirm OTP</button>
        </div>
      </form>
    </div>
</div>

像这样。在这里，我首先要显示电话表格。当我输入数字时，应显示第二个表格。在此之前，隐藏了第二种形式。你能帮我用Jquery解决这个问题。谢谢。

Answer 1

查看此Demo

您可以隐藏css中的第二个表单

.form-inline.yoyo{
    display:none
}

以后使用.show()

显示表单

$(".sendd").click(function(){
   if($("#phoneOTP").val()=="")
      alert("please enter PhoneOTP")
   else
     $(".yoyo").show();
});

Answer 2

您必须为表单提供一些ID以区分这两种形式。但之后只是在你的div上做一个节目。我已经给了它一个额外的课程hidden，表明你可以删除课程。

＆＃13;

$("#phoneF").submit(function() {
  $(".OTPForm").removeClass("hidden");
});

＆＃13;

.hidden {
  visibility: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="phoneVerification">
  <h1><span style="border-bottom:2px solid">Phone Verification</span></h1>
  <div class="phoneForm">
    <form id="phoneF" class="form-inline" role="form" action="javascript:void(0);" method="post">
      <div class="form-group">
        <label for="phone">Phone</label>
        <input type="text" class="form-control" id="phoneOTP" />
        <button type="submit" class="btn btn-success">Send OTP</button>
      </div>
    </form>
  </div>
  <div class="OTPForm hidden">
    <form class="form-inline" role="form" action="javascript:void(0);" method="post">
      <div class="form-group">
        <label for="phone">OTP</label>
        <input type="text" class="form-control" id="phoneOTP" />
        <button type="submit" class="btn btn-success">Confirm OTP</button>
      </div>
    </form>
  </div>
</div>

＆＃13;

JSFiddle

Answer 3

$(".phoneForm input[type=text]").on("input", function() {
   if($(this).val()!="") {
      $(".phoneForm").next().show();
   }
   else {
      $(".phoneForm").next().hide();
   }
)};

使用上面的代码。 http://www.w3schools.com/jquery/jquery_hide_show.asp 这是教程。

如何使用Jquery隐藏和显示表单？

3 个答案: