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

请帮助我解决错误的地方。这是a link对于相同的

Answer 1

为您的案例制作了一个小型原型(prototype)解决方案:

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