jQuery onsubmit動畫不起作用

Question

我想要幾種形式，以便在某一時刻只能看到一種形式。 在單擊“下一步”或提交第一個表單后，應顯示第二個表單，並且窗口應向下滾動到下一個表單。 但是不知何故，它不起作用。

function showHide() {
   var div = document.getElementById("hidden_div");
   if (div.style.display == 'none') {
     div.style.display = '';
   }
   else {
     div.style.display = 'none';
   }
   }
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script>

$(document).ready(function(){
   $("#form1").submit(function() {
   $('html,body').animate({
        scrollTop: $("#hidden_div").offset().top},'slow');
       return false;
})
});

 </script>

這是html部分：

Some Form elements---

    <div id="button">
                                        <input type="submit"   onclick=showHide(); style="background:#02B98D; padding:8px; border:1px solid black; color:white;  width:20%; font-size:16px; font-weight:bold;" ></div>
 <div id="hidden_div" style="display:none">
 <form onsubmit="showHide1(); return false;" method="post" id="form2" >
                                 <section class="widget bottom-tag-line" >

請幫我解決問題。 這是相同的鏈接

Answer 1

為您的案例制作了一個小型原型解決方案：

 $(function () { $("form").submit(function (e) { e.preventDefault(); $this = $(this); $this.addClass("hidden"); $($this.attr("action")).removeClass("hidden"); }); }); 

 * {font-family: Segoe UI;} .hidden {display: none;} 

 <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <form action="#form2" id="form1"> <input type="text" value="Form 1 Here" /> <input type="submit" value="Next" /> </form> <form action="#form3" id="form2" class="hidden"> <input type="text" value="Form 2 Here" /> <input type="submit" value="Next" /> </form> <form action="save.php" id="form3" class="hidden"> <input type="text" value="Form 3 Here" /> <input type="submit" value="Next" /> </form> 

---

使用上一個按鈕...

 $(function () { $("form").submit(function (e) { e.preventDefault(); $this = $(this); $this.addClass("hidden"); $($this.attr("action")).removeClass("hidden"); }); $("input.prev").click(function () { $(this).closest("form").addClass("hidden"); $($(this).data("prev")).removeClass("hidden"); }); }); 

 * {font-family: Segoe UI;} .hidden {display: none;} 

 <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <form action="#form2" id="form1"> <input type="text" value="Form 1 Here" /> <input type="submit" value="Next" /> </form> <form action="#form3" id="form2" class="hidden"> <input type="button" value="Previous" data-prev="#form1" class="prev" /> <input type="text" value="Form 2 Here" /> <input type="submit" value="Next" /> </form> <form action="save.php" id="form3" class="hidden"> <input type="button" value="Previous" data-prev="#form2" class="prev" /> <input type="text" value="Form 3 Here" /> <input type="submit" value="Next" /> </form>