Fatal编程技术网
  • jquery/
  • Jquery 单击时不显示表单btn

Jquery 单击时不显示表单btn

jquery forms

Jquery 单击时不显示表单btn,jquery,forms,Jquery,Forms,我的代码中有3个表单。onload我只想显示表格1，当submit1按下时，应显示表格2，当单击submit2时，应隐藏表格1和表格3，然后显示表格3 根据建议进行修改后，我添加了ID和样式…onload它加载表单1并隐藏2和3，但现在在提交时单击它重新加载表单1，而不是加载表单2并隐藏表单1 <script type="text/javascript"> $(function submitform() { $( "#dialog-message" ).dialo

我的代码中有3个表单。onload我只想显示表格1，当submit1按下时，应显示表格2，当单击submit2时，应隐藏表格1和表格3，然后显示表格3

根据建议进行修改后，我添加了ID和样式…onload它加载表单1并隐藏2和3，但现在在提交时单击它重新加载表单1，而不是加载表单2并隐藏表单1

<script type="text/javascript">    


$(function submitform() {
    $( "#dialog-message" ).dialog({
      modal: true,
      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
          window.location = "http://mysiteloc.com";
        }
      }
    });
  }); 


 $("#submit1").click(function(e) {
    $("#form2").show();
    $("#form1").hide();  
     $("#form3").hide();   
    e.preventDefault();
});

$("#submit2").click(function(e) {
    $("#form3").show();
    $("#form1").hide();
    $("#form2").hide();
    e.preventDefault();
});

  </script>
<body>
<form id="form1" method="post" >     

            <div>
                <input type="text" id="inputemail" name="email" placeholder="Email" height="34px" required>
            </div>  
            <div >
                <button id="submit1" type="submit" name="submit1" ><strong>Start</strong></button>
            </div>      
 </form> 

<form id="form2" method="post" style="display:none">         

            <div>
                <input type="text" id="inputpwd" name="pwd" placeholder="Password" height="34px" required>
            </div>
            <div >
                    <button id="submit2" type="submit" name="submit2" ><strong>Next</strong></button>
            </div> 

 </form>  

<form id="form3" method="post" style="display:none"> 
        <div required>
                    <input type="checkbox" value="0" name="book_type[]"> Romance</input><br>
                    <input type="checkbox" value="1" name="book_type[]"> Action</input><br>
                    <input type="checkbox" value="2" name="book_type[]"> suspense</input><br>
                    <input type="checkbox" value="3" name="book_type[]"> thriller</input><br>
                </div>
                <div >
                    <button id="submit3" type="submit" name="submit3" onclick="submitform();"><strong>Next</strong></button>
                </div> 
</form>
</body>


$（函数submitform（）{
$（“#对话框消息”）.dialog({
莫代尔：是的，
按钮：{
好的：函数（）{
$（此）.dialog（“关闭”）；
window.location=”http://mysiteloc.com";
}
}
});
}); 
$（“#提交1”）。单击（函数（e）{
$（“#form2”）.show（）；
$（“#form1”）.hide（）；
$（“#form3”）.hide（）；
e、 预防默认值（）；
});
$（“#提交2”）。单击（功能（e）{
$（“#form3”）.show（）；
$（“#form1”）.hide（）；
$（“#form2”）.hide（）；
e、 预防默认值（）；
});
开始
下一步
浪漫

行动

悬念

惊悚片

下一步
您需要将id添加到提交按钮，因为这是您用来捕获点击事件的：

<button type="submit" id="submit1" name="submit1" ><strong>Start</strong></button>
要隐藏第二个和第三个表单，请首先使用CSS规则：

#form2, #form3 {display: none;}
尝试如下设置表单：

<form id="form2" method="post" style="display:none">
我不认为在表单中对其进行标记会像您所拥有的那样起作用。

这是jquery，不是PHPi添加了ID和样式…onload它加载表单1并隐藏2和3，但在提交时单击它会重新加载表单1，而不是加载表单2并隐藏表单1 
<form id="form2" method="post" style="display:none">