0

I have a simple contact form. I got the invalid email and fill all the fields error messages correctly, but I don't get the success message. Hence it's sending the email twice without giving any returning success messages (I just click once, I'm sure about that).

The JS part: 

<script language="javascript" type="text/javascript" >
    $(function(){
        $("#ContactForm").submit(function(){
            $("#submitf").value='Sending...';

            $.post("send.php", $("#ContactForm").serialize(),
            function(data){
                if(data.frm_check == 'error'){

                    $("#message_post").html("<div class='errorMessage'>Error: " + data.msg + "!</div>");
                    document.ContactForm.submitf.value='Send Again >>';
                    document.ContactForm.submitf.disabled=false;
                } else if(data.frm_check == 'done') {
                    $("#message_post").html("<div class='successMessage'>Thanks, " + data.msg + "!</div>");
                }
            }, "json");

            return false;
        });
    });
 </script>

The PHP part: 

$return_arr = array();
$email = $_POST["email"];   
$message= $_POST["message"];    
$name= xss_protect(sacarXss($_POST["name"]));   
if(!empty($email) && !empty($name) && !empty($message)) {
    if(isValidEmail($email)){   
        $return_arr["frm_check"] = 'done';
        $return_arr["msg"] = "Success";             
        send_mail($email, $name, $message);
    } 
    else{
        $return_arr["frm_check"] = 'error';
        $return_arr["msg"] = "Invalid email";        
    }

} else {                
    $return_arr["frm_check"] = 'error';
    $return_arr["msg"] = "Fill all the fields.";
}
echo json_encode($return_arr); ?>

The HTML part: 

<form method="post"  id="ContactForm">
    <div class="element">
        <input type="text" name="name" class="text" placeholder="name" /><br />
        <input type="text" name="email" placeholder="email" class="text" /><br />
        <textarea name="message" class="textarea" rows="3" placeholder="message"></textarea><br />
        <input type="submit" name="submitf" id="submitf" value="send!"/>
    </div>
    <div id='message_post'></div>
</form>
4

1 回答 1

0

我认为表单被发送两次到 php 脚本：通过 javascript 和表单的提交按钮。如果您将提交按钮的类型从“提交”更改为“按钮”，则表单将仅发送一次。

您必须解析 JSON 响应，因此 javascript 函数变为：

<script language="javascript" type="text/javascript" >
    $(function(){
        $("#ContactForm").submit(function(){
            $("#submitf").value='Sending...';

            $.post("send.php", $("#ContactForm").serialize(),
            function(data){
                data = jQuery.parseJSON(data);
                if(data['frm_check'] == 'error'){

                    $("#message_post").html("<div class='errorMessage'>Error: " + data['msg'] + "!</div>");
                    document.ContactForm.submitf.value='Send Again >>';
                    document.ContactForm.submitf.disabled=false;
                } else if(data['frm_check'] == 'done') {
                    $("#message_post").html("<div class='successMessage'>Thanks, " + data['msg'] + "!</div>");
                }
            }, "json");

            return false;
        });
    });
 </script>
于 2013-03-31T22:27:18.443 回答