Question

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

根据建议修改代码我添加了id和样式... onload它加载表单1并隐藏2＆amp; 3 但现在在submit1上单击它重新加载表单1而不是加载表单2并隐藏form1

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

Answer 1

您需要在提交按钮中添加ID，因为这是您用来捕获点击事件的内容：

<button type="submit" id="submit1" name="submit1" ><strong>Start</strong></button>

您还可以将jQuery选择器更改为仅使用name属性：

$('button[name="submit1"]').click(function(e) {

要隐藏第二个和第三个表单，请先使用CSS规则：

#form2, #form3 {display: none;}

Answer 2

尝试像这样设置表单：

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

我不认为在表单中标记它会像你拥有它一样。

单击btn上不显示的表单

2 个答案: