未检查的复选框正在导致Ajax反馈悬挂(带有旋转加载图标)

Question

保罗在这里。我正在使用一个复选框，一个文本方面和一些输入的简单表单。我帖子到数据库上工作localhost，我可以成功提交所有表单数据，但是当我的表单中的复选框未经选中：反馈失败时遇到麻烦，它说"请等待"，只是旋转。数据库在两种情况下都可以记录数据，但是我很感谢任何帮助，以使其更加响应。

当用户离开"订阅"未选中时，主要问题发生：

没有反馈。

我也希望学习如何创建更深层的反馈，例如"您的消息已发送。我们会尽快与您联系。您也已添加到我们的邮件列表中。"

这是我的php：

<?php
/*Contact Form*/
//ajax call
if(isset($_GET['action'])&& $_GET['action'] == 'contact'){
    mysql_connect('localhost','******','**********');   
    mysql_select_db('*******');
    //sanitize data
    $email = mysql_real_escape_string($_POST['contact-email']);
    //validate email address - check if input was empty
    if(empty($email)){
        $status = 'error';
        $message = 'You did not enter an email address!';
    }
    else if(!preg_match('/^[^W][a-zA-Z0-9_]+(.[a-zA-Z0-9_]+)*@[a-zA-Z0-9_]+(.[a-zA-Z0-9_]+)*.[a-zA-Z]{2,4}$/', $email)){ //validate email address - check if is a valid email address
        $status = "error";
        $message = "You have entered an invalid email address!";
    }
    else {
        $existingContact = mysql_query("SELECT * FROM contact WHERE contact_email_address='$email'");   
        if(mysql_num_rows($existingContact) < 1){
            //database insert code
            $message = $_POST['contact-textarea'];
            $checkbox = $_POST['contact-checkbox'];
            $name = $_POST['contact-name'];
            $date = date('Y-m-d');
            $time = date('H:i:s');
            $insertContact = mysql_query("INSERT INTO contact (contact_email_address, contact_date, contact_time, contact_name, contact_message, contact_checkbox) VALUES ('$email','$date','$time','$name','$message','$checkbox')");
            if($insertContact){
                $status = 'success';
                $message = 'your message has been received';    
            }
            else {
                $status = 'error';
                $message = "Oops, there's been a technical error!"; 
            }
        }
        else {
            $status = 'error';
            $message = 'This email address has already been registered!';
        }
    }
    //return the JSON response
    $data = array(
        'status' => $status,
        'message' => $message
    );
    echo json_encode($data);
    exit;
}
?>

这是我的html：

    <form id="contact-form" action="?action=contact" method="post">
        <legend>Contact us:</legend>
        <label for="email">Your email: *</label>
        <input type="email" name="contact-email" id="contact-email" placeholder="Your email here..." required></input>
        <label for="name">Your Name: *</label>
        <input type="name" name="contact-name" id="contact-name" placeholder="Your name here..." required></input>
        <label for="message">Your Message: *</label>
        <textarea id="contact-textarea" name="contact-textarea" placeholder="Type your message here..." rows = "8" cols = "35" required></textarea>
        <label for="checkbox">Subscribe to Newsletter?</label>
        <input type="checkbox" name="contact-checkbox" id="contact-checkbox" value="1"></input>
        <p id="contact-response"></p>
        <input type="submit" name="contact-button" id="contact-button"></input>
    </form>

这是JavaScript：

$(document).ready(function(){
   $('#contact-form').submit(function(){
    //check the form is not currently submitting
    if($(this).data('formstatus') !== 'submitting'){ 
        //setup variables
        var form = $(this),
            formData = form.serialize(),
            formUrl = form.attr('action'),
            formMethod = form.attr('method'), 
            responseMsg = $('#contact-response');
        //add status data to form
        form.data('formstatus','submitting');
        //show response message - waiting
        responseMsg.hide()
                   .addClass('response-waiting')
                   .text('Please Wait...')
                   .fadeIn(200);
        //send data to server
        $.ajax({
            url: formUrl,
            type: formMethod,
            data: formData,
            success:function(data){
                //setup variables
                var responseData = jQuery.parseJSON(data), 
                    klass = '';

                //response conditional
                switch(responseData.status){
                    case 'error':
                        klass = 'response-error';
                    break;
                    case 'success':
                        klass = 'response-success';
                    break;  
                }
                //show reponse message
                responseMsg.fadeOut(200,function(){
                    $(this).removeClass('response-waiting')
                           .addClass(klass)
                           .text(responseData.message)
                           .fadeIn(200,function(){
                               //set timeout to hide response message
                               setTimeout(function(){
                                   responseMsg.fadeOut(200,function(){
                                       $(this).removeClass(klass);
                                       form.data('formsstatus','idle');
                                   });
                               },3000)
                            });
                }); 
            }
        });
    }
    //prevent form from submitting
    return false;
    });
})

Answer 1

我最好的猜测是与jQuery.Serialize.Serialize如果未选中的复选框序列化的事实。

。

比较：

检查： contact-email = test％40Gmail.com＆amp; contact-name = test＆amp; conterc; conterc; contern-textarea = test＆amp; conterp; contact-checkbox = 1
未选中： Contact-Email = test％40GMAIL.com＆amp; contact-name = test＆amp; conterc; conterc; contercy-textarea = test

结果，$ _post ['Contact-Checkbox']返回NULL，该null可能更改返回的数据为包括PHP警告，这打破了您要返回的JSON。要修复它，请尝试此操作（我不完全确定它将起作用）：

if ( isset($_POST['contact-checkbox']) ) {
    $checkbox = $_POST['contact-checkbox'];
}
else {
    $checkbox = 0;
}

这检查是否发布了联系复选框。如果是这样，如果将复选框值设置为POST值。如果不是，则将复选框设置为0。