Question

我想在页面顶部放置一个注册表单。如果用户想要注册，我想通过Jquery slideToggle为用户显示它。在我的形式我有一些字段，如“用户名”，“密码”，“再次输入密码”，“电子邮件地址”，... 和一个“提交按钮”。但是，当我想按“提交按钮”，页面完全重新加载！..我想slideToggle保持打开未关闭！..哪里错了？

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <!--css-->
        <link rel="stylesheet" href="/css/home.css" />
        <link rel="stylesheet" href="/css/jquery-ui.css">
        <!--JS-->
        <script src="/js/jquery-1.7.1.min.js"></script>
        <script src="/js/jquery-ui.min.js"></script>

        <title>فرم ها</title>
        <script>
            $(document).ready(function(){
                $(".register").click(function(){
                    $(".register-panel").slideToggle("slow");
                });

            });

        </script>

        </head>

    <body>
    <div class="register-panel">
        <table>
            <tr>
                <td width="30%">
                <p align="right"><b>فرم ثبت نام:</b></p>
                <div id="form-messages"></div>
                <form id="register-form" name="register-form">
                    <table id="register-table">
                        <tr>
                            <td><label for="reg-username">نام کاربری</label></td>
                            <td><input type="text" id="reg-username" size="15" title="حداقل ۶ کاراکتر لاتین" /></td>
                        </tr>
                        <tr>
                            <td><label for="reg-password">رمز عبور</label></td>
                            <td><input type="password" id="reg-password" size="15" title="حداقل ۶ کاراکتر"/></td>
                        </tr>
                        <tr>
                            <td><label for="reg-repassword">تکرار رمز عبور</label></td>
                            <td><input type="password" id="reg-repassword" size="15"/></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><center><img src="visual-captcha.php" width="185" height="60" alt="Visual CAPTCHA" id="captcha" title="کد امنیتی" /></center></td>
                            <td><img src="/images/refresh.png" onclick="document.getElementById('captcha').src =  document.getElementById('captcha').src + '?' + (new  Date()).getMilliseconds()" align="right" title="تغییر تصویر" style="cursor: pointer"></td>
                        </tr>
                        <tr>
                            <td><label>کد امنیتی</label></td>
                            <td><input type="text" name="user_code" size="15" title="پنج حرف تصویر فوق را وارد کنید"></td>
                        </tr>
                        <tr>
                            <td><label for="reg-email">آدرس ایمیل</label></td>
                            <td><input type="text" id="reg-email" size="15" /></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td align="left"><input type="submit" value="ثبت نام" id="reg-button" /></td>
                        </tr>

                    </table>
                </form>
                </td>
                <td width="40%"><center><h1>به فرم ها خوش آمدید</h1></center></td>
                <td width="40%"><p>با <b>فرم ها</b> می توانید فرم های  دلخواه خود را طراحی کنید و آن را جهت تکمیل نمودن در اختیار کاربرانتان قرار دهید.</p>
                <p>ثبت نام در فرم ها رایگان می باشد.</p></td>
            </tr>

        </table>
    </div>
    <table>
        <tr>
            <td width="70" height="23"><center><div class="register">ثبت نام</div></center></td>
            <td></td>
        </tr>
    </table>




    </body>
</html>

Answer 1

我没有正确理解你的问题，但这里是你如何检查页面上的表格。

if($('#register-form').length > 0){
   //For is present do what you want
}

Answer 2

您需要捕获表单提交 - ＆gt;

$("#register-form").submit(function(e){

然后你需要防止发生默认值。

  e.preventDefault();

然后你编写任何代码来验证表格。

  //your validation code goes here.

所以它最终会像 - ＆gt;

$("#register-form").submit(function(e){

  //prevent default action, do not submit the form.
  e.preventDefault();

  //validate the form here, and perform whatever checks are necessary
});

在slideToggle中注册表单

2 个答案: