Question

我的表格中包含客户相关信息，我正在尝试这个表格的三个任务 1.验证正确的email_id，手机号码等信息 2.以Josn格式发布表格数据 3.成功提交后，我已重定向到其他页面，如构造页面。

第一个和第二个正在运作但我不知道如何在成功提交后重定向到其他页面。

Form.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">



<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>

<style>
label.error {
    color: red;
    font-style: italic;
    background: transparent url(images/unchecked.gif) no-repeat scroll 0 0;
    padding-left:20px;
    margin-left:10px;
}
input.error {
    border: 1px dotted red;
}
.border td {
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
.border th {
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
</style>


<script>
$(document).ready(function(){

    $("#register-form").validate({
        rules: {
            userName: "required",                           
            email: {
                required: true,
                email: true
            },                                              
            userContactNumber: "required"                       
        },
        messages: {
            userName: "Please enter your Name",
            userContactNumber: "Please enter your Mobile number",                           
            email: "Please enter a valid email address",                                           
        },
        submitHandler: function(form) {

            // get values from textboxs 
            var uName = $('#userName').val();
            var mailId = $('#email').val();
            var mobNum = $('#userContactNumber').val();

            // Alert for DEMO

            //alert("Name:"+uName+", Email:"+mailId+", Mob_Num:"+mobNum);

            // comment out AJAX for DEMO only

            $.ajax({
                url:"http://localhost/homes/bookService.php",
                type:"POST",
                dataType:"json",
                data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum },
                //type: should be same in server code, otherwise code will not run
                ContentType:"application/json",
                success: function(response){
                    //alert(JSON.stringify(response));
                    alert("1");
                    window.location.href = 'index.html';
                },
                error: function(err){
                    //alert(JSON.stringify(err));
                }
            });


            return false; // block regular submit
        }
    });

});
</script>

<title>All in One Home Services - The Next Generation of Services Provider</title>

</head>
    <body>
        <form  class="form-horizontal" id="register-form"  method="post">
            <div class="col-lg-8">      
                <div class="fieldgroup">
                    <label class="col-lg-3 control-label" for="userName">Name:<font
                        style="color: red;">*</font></label>
                    <div class="col-lg-9">
                        <input style=" height: 30px;" class="form-control" id="userName" name="userName"
                            placeholder="Full Name" value="" type="text" required>
                    </div>
                </div>

                <div class="fieldgroup">
                    <label for="email" class="col-lg-3 control-label">Email:<font
                        style="color: red;">*</font></label>
                    <div class="col-lg-9">
                        <input style="height: 30px;" class="form-control" name="email"
                            id="email" placeholder="you@example.com" value=""
                            type="text" required>
                    </div>
                </div>

                <div class="fieldgroup">
                    <label for="userContactNumber" class="col-lg-3 control-label">Mobile:<font
                        style="color: red;">*</font></label>
                    <div class="col-lg-9">
                        <input style="height: 30px; width:100%;" class="form-control" id="userContactNumber"
                            name="userContactNumber" placeholder="Mobile Number"
                            onkeypress="enableKeys(event);" maxlength="10" type="text" required>
                    </div>
                </div>
            </div>
            <input type="submit" name="submit" value="Submit form"  />
        </form>
    </body>
</html>

bookService.php

    if(isset($_POST['type']))
    {
        if($_POST['type']=="booking"){
            $name = $_POST ['Name'];
            $mobile = $_POST ['Mob_Num'];
            $mail = $_POST ['Email'];    

            $query1 = "insert into customer(cust_name, cust_mobile, cust_email) values('$name','$mobile','$mail')";
            $result1=mysql_query($query1);
        }
    }
    else{
        echo "Invalid format";
    }
?>

Answer 1

您需要在AJAX功能的成功回调中进行重定向 -

$.ajax({
    url:"http://localhost/homes/bookService.php",
    type:"POST",
    dataType:"json",
    data:{type:"booking",Name:uName, Email:mailId, Mob_Num:mobNum },
    //type: should be same in server code, otherwise code will not run
    ContentType:"application/json",
    success: function(response){
        window.location.href = 'wherever.html'; // redirect on success
    },
    error: function(err){
        //alert(JSON.stringify(err));
    }
});

此外，您应该quit using alert() for troubleshooting.

Answer 2

我无法评论所以我不确定我的答案坚果你可以尝试将变量传递给

$(document).ready(function(e){
//write this some where in function you can see whether its working or not 
e.preventDefault();
}

我遇到了同样的问题？我用它解决了这个问题我无法通信，所以我联系回答它。

如何在提交表单结果后将其发布到其他URL？

2 个答案: