Question

我有一个html表单如下：

<form role="form" name="login" id="login" >


    <div id="alert-success" class="alert alert-success" style="display: none" ></div>
    <div id="alert-danger" class="alert alert-danger" style="display: none" ></div>

    <div class="form-group">
        <label for="exampleInputEmail1">Name</label>
        <input type="name" class="form-control" id="username" placeholder="Enter name" style="width: 30%;">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="usermail" placeholder="Enter email" style="width: 30%;">
    </div>

    <div class="form-group">
        <label for="exampleInputPassword1">Username</label>
        <input type="password" class="form-control" id="loginname" placeholder="username" style="width: 30%;">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="loginpassword" placeholder="Password" style="width: 30%;">
    </div>


    <div class="checkbox">
        <label>
            <input type="checkbox"> Check me out
        </label>
    </div>
    <button type="submit" id="submit"  data-dismiss="alert" name="submit" class="btn btn-default">Join Us</button>
</form>

用于验证和提交表单的同一文件中的jquery：

$(document).ready(function () {
        $("#submit").click(function () {
            var username = $("#username").val();
            var usermail = $("#usermail").val();
            var loginname = $("#loginname").val();
            var loginpassword = $("#loginpassword").val();
            var emailregex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if (username == "" || username.length > 20 || !isNaN(username)) {
                $('#alert-danger').show();
                $("#alert-danger").html("Please Enter Proper Name");
                $("#username").focus();
                return false;

            } else if (usermail == "" || !emailregex.test(usermail)) {
                $('#alert-danger').show();
                $("#alert-danger").html("Please Enter Your Email Id");
                $("#usermail").focus();
                return false;

            } else if (loginname == "" || loginname.length > 10) {
                $('#alert-danger').show();
                $("#alert-danger").html("Please Enter Username");
                $("#loginname").focus();
                return false;

            } else if (loginpassword == "" || loginpassword.length > 10) {

                $('#alert-danger').show();
                $("#alert-danger").html("Please Enter Proper Password");
                $("#loginpassword").focus();
                return false;

            } else {
                var datastring = 'name=' + username + '&email=' + usermail + '&loginusername=' + loginname + '&loginuserpassword=' + loginpassword;

                $.ajax({
                    type: "POST",
                    url: "userdata.php",
                    data: datastring,
                    cache: false,
                    sucess: function (dataitem) {
                        if (dataitem == 1) {
                            $("#alert-danger").html("Something Went Wrong");
                        } else {
                            $("#alert-danger").html("Something Went Wrong");
                        }
                    }
                })
            }
        })
    })

现在我在提交表单时遇到问题，它确实有效，因为数据已保存到数据库表中，但在提交后我看不到我的表单，我使用了location.reload();函数但仍然无效，请帮忙

Answer 1

这样做：

$("#submit").click(function() {

// your code


return false;
});

或

in else part

else

    {
        var datastring = 'name=' + username + '&email=' + usermail + '&loginusername=' + loginname + '&loginuserpassword=' + loginpassword;

        $.ajax({
           // code .... 
        });
         return false;

    }

当您正确填写表单时，它已被ajax提交，然后提交单击。返回false会停止下一次提交，只有你的ajax帖子会停止。

Answer 2

在函数（）中添加e，然后在click函数中添加e.preventDefault（）作为第一行：

$("#submit").click(function(e) {
    e.preventDefault();

    //code here
});

Answer 3

<button type="submit" id="submit"  data-dismiss="alert" name="submit" class="btn btn-default">Join Us</button>

应该是：

<input type="submit" id="submit"  data-dismiss="alert" name="submit" class="btn btn-default" value="Join Us">

使用ajax提交表单后表单消失

3 个答案: