Как скрыть и показать формы с помощью JQuery?

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

Вы должны дать свою форму некоторый идентификатор, чтобы различать две формы. Но после этого просто сделайте шоу на своем div. Я дал ему дополнительный класс hidden показать, что вы можете просто удалить класс.

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

.hidden { 
 
    visibility: hidden; 
 
}

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

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 вот урок.