-1

我在同一页面中创建了 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();则页面在没有验证的情况下滑动，如果我添加评论，页面将保持在第一种形式本身并且不会slideUp，您可以正确看到验证。

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

4

1 回答 1

0

使用重复的 ID 是问题所在。

将 id 替换为类属性：

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

不要忘记：

e.preventDefault();

http://jsfiddle.net/pe3TS/

于 2013-09-07T09:55:32.037 回答