Question

我在同一页面中创建了2个表单以便滑动..

HTML - 第一种表单

<form action="index.php" method="post" id="reg-1" enctype="multipart/form-data">
   <input type="text" name="userName" placeholder="Username" maxlength="50">
    <br />
   <input type="text" name="fName" placeholder="Full Name" maxlength="100">
     <br />
   <input type="email" name="email" placeholder="Email" maxlength="100">
     <br />
   <input type="password" name="password" placeholder="Password" maxlength="32">
     <br />
   <input type="submit" value="Next" name="submit" id="submit">

HTML - 第二种形式

<form method="post" id="reg-2" enctype="multipart/form-data">
   <input type="text" name="country" placeholder="Country">
     <br />
   <input type="text" name="state" placeholder="State">
     <br />
   <input type="text" name="city" placeholder="City">
     <br />
   <select id="relationship" name="relationship">
      <option value="0">Relationship Status</option>
      <option value="Single">Single</option>
      <option value="In a relationship">In a relationship</option>
      <option value="Engaged">Engaged</option>
      <option value="Married">Married</option>
   </select>
      <br />
   <input type="submit" id="submit" name="submitBtn" value="Register !" >

的jQuery

<script src="jquery-2.0.3.min.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function(e) {
        $("#reg-2").hide();
        $("#submit").click(function(e) {
            $("#reg-1").hide("fast");
            $("#reg-2").show("slow");
            //$("#reg-2").slideUp("slow");
            //e.preventDefault();
          });
       //e.preventDefault();
    });
</script>

现在的问题是滑动根本没有发生，但页面刷新并仅停留在表单1并且根本不滑动。

如果我删除了e.preventDefault();的评论，那么页面会在没有验证的情况下滑动，如果我添加评论，页面将保留在第1个表单本身而不是slideUp，您可以正确地看到验证。

那么在验证后如何让它滑动呢？

Answer 1

使用重复的ID是个问题。

将id替换为class属性：

<input type="submit" value="Next" name="submit" class="submit"> $(".submit").click(function(e) {....

并且不要忘记：

e.preventDefault();

http://jsfiddle.net/pe3TS/

形式不向上滑动

1 个答案: