javascript - AJAX 表单未提交或执行任何操作

Question

我有一个 AJAX 表单，我正在尝试让它工作，但我不明白为什么。我没有收到 PHP 错误，因为我已经检查了日志文件。基本上，当我提交表单时什么也没有发生。我有另一种非常相似的表格并且它正在工作，所以我不知道发生了什么。可能是我忽略的非常简单的事情。

表格如下:

<div id="give-away-form">
    <form method="post" action="ajax.php" class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-2 hidden-xs"></div>
            <label for="give_away_name" class="col-sm-2 col-xs-12 control-label">Name</label>
            <div class="col-sm-5 col-xs-12">
                <input type="text" class="form-control" name="give_away_name" id="give_away_name" placeholder="Name">
            </div>
            <div class="col-sm-3 hidden-xs"></div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 hidden-xs"></div>
            <label for="give_away_email" class="col-sm-2 col-xs-12 control-label">Email</label>
            <div class="col-sm-5 col-xs-12">
                <input type="text" class="form-control" name="give_away_email" id="give_away_email" placeholder="Email">
            </div>
            <div class="col-sm-3 hidden-xs"></div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 hidden-xs"></div>
            <label for="give_away_phone_no" class="col-sm-2 col-xs-12 control-label">Phone No</label>
            <div class="col-sm-5 col-xs-12">
                <input type="text" class="form-control" name="give_away_phone_no" id="give_away_phone_no" placeholder="Phone No">
            </div>
            <div class="col-sm-3 hidden-xs"></div>
        </div>
        <div class="form-group">
            <!-- Street -->
            <div class="col-sm-2 hidden-xs"></div>
            <label for="give_away_street" class="col-sm-2 col-xs-12 control-label">Street</label>
            <div class="col-sm-5 col-xs-12">
                <input class="form-control" name="give_away_street" id="give_away_street" placeholder="Street">
            </div>
            <div class="col-sm-3 hidden-xs"></div>
        </div>
        <div class="form-group">
            <!-- End Street -->
            <!-- City -->
            <div class="col-sm-2 hidden-xs"></div>
            <label for="give_away_city" class="col-sm-2 col-xs-12 control-label">City</label>
            <div class="col-sm-2 col-xs-12">
                <input class="form-control" name="give_away_city" id="give_away_city" placeholder="City">
            </div>
            <!-- End City -->
            <!-- State -->
            <label for="give_away_state" class="col-sm-1 col-xs-12 control-label">State</label>
            <div class="col-sm-2 col-xs-12">
                <select class="form-control" name="give_away_state" id="give_away_state">
                    <option value="">State</option>
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                    <option value="AZ">Arizona</option>
                    <option value="WA">Washington</option>
                    <option value="WV">West Virginia</option>
                    <option value="WI">Wisconsin</option>
                    <option value="WY">Wyoming</option>
                </select>
            </div>
            <!-- <div class="col-sm-3 hidden-xs"></div> -->
        </div>
        <div class="form-group">
            <div class="col-sm-2 hidden-xs"></div>
            <label class="col-sm-2 col-xs-12 control-label hidden-xs">&nbsp;</label>
            <div class="col-sm-5 col-xs-12 text-left">
                <input type="hidden" name="action" value="give_away_form" />
                <input type="submit" class="btn btn-primary" value="Submit">
                <div class="clear"></div>
                <div id="give_away_form_message"></div>
            </div>
            <div class="col-sm-3 hidden-xs"></div>
        </div>
    </form>
    <!-- End Form -->
</div>

这是 PHP:

if(isset($_POST['action']) && $_POST['action'] == 'give_away_form') {
    $result = array();

    $give_away_name = strip_tags(trim($_POST['give_away_name']));
    $give_away_email = strip_tags(trim($_POST['give_away_email']));
    $give_away_phone_no = strip_tags(trim($_POST['give_away_phone_no']));
    $give_away_street = strip_tags(trim($_POST['give_away_street']));
    $give_away_city = strip_tags(trim($_POST['give_away_city']));
    $give_away_state = strip_tags(trim($_POST['give_away_state']));

    if($give_away_name == '')
        $result['error']['give_away_name'] = 'Name required.';

    if($give_away_email == '')
        $result['error']['give_away_email'] = 'Email address required.';
    else if(!filter_var($give_away_email, FILTER_VALIDATE_EMAIL))
        $result['error']['give_away_email'] = 'Invalid email address.';

    if($give_away_phone_no == '')
        $result['error']['give_away_phone_no'] = 'Phone no required.';

    if($give_away_comment == '')
        $result['error']['give_away_comment'] = 'Comment required.';

    if(!isset($result['error'])) {
        $to = $give_away_to;
        $subject = $give_away_subject;

        $message = '<p>Hi,</p>';
        $message .= '<p>You have received this message from give_away form on Hope Starts Here - Columbus</p>';
        $message .= '<p><strong>Name:</strong>'.$give_away_name.'</p>';
        $message .= '<p><strong>Email:</strong>'.$give_away_email.'</p>';
        $message .= '<p><strong>Phone No:</strong>'.$give_away_phone_no.'</p>';
        $message .= '<p><strong>Comment:</strong><br>'.$give_away_comment.'</p>';
        $message .= '<p>&nbsp;</p>';
        $message .= '<p><strong>Thank You.</strong></p>';

        $headers = "From: " . strip_tags($give_away_from) . "\r\n";
        $headers .= "Reply-To: ". strip_tags($give_away_email) . "\r\n";
        //$headers .= "CC: abc@example.com\r\n";
        $headers .= "MIME-Version: 1.0\r\n";
        $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

        if(@mail($to, $subject, $message, $headers)) {
            $result['success'] = 'Thank you for entering to win! Once the names are drawn, we will contact the winners by email or phone.';
        } else {
            $result['error']['give_away_form_message'] = 'Something wrong please try again...';
        }
    } 

    echo json_encode($result);
    die;
}

还有，JS:

$('#give-away-form form').submit(function(e) {
    $('span.form-message').remove();
    e.preventDefault();
    $this = $(this);
    var url = $this.attr('action');
    var data = $this.serialize();
    $.ajax({
        url: url,
        method: 'POST',
        data: data,
        dataType: 'json',
        success: function(response) {
            if(response.error) {
                var focus_field = '';
                $.each(response.error, function(id, message) {
                    $('#'+id).after('<span class="form-message label label-danger">' + message + '</span>');
                    if(focus_field == '')
                        focus_field = id;
                });
                $('#'+focus_field).focus();
            }
            if(response.success) {
                $('#give_away_form_message').after('<span class="form-message label label-success">' + response.success + '</span>');
                $this[0].reset();
            }
        }
    });
});

Answer 1

您能否尝试此代码并告诉我们哪些警报有效？

$('#give-away-form form').submit(function(e) {
    $('span.form-message').remove();
    e.preventDefault();
    $this = $(this);
    var url = $this.attr('action');
    var data = $this.serialize();
    $.ajax({
        url         :   url,
        method      :   'POST',
        data        :   data,
        dataType    :   'json',
        success     :   function(response) {
            alert("Number 1");
            if(response.error) {
                alert("Number 2");
                var focus_field = '';
                $.each(response.error, function(id, message) {
                    alert("Number 3");
                    $('#'+id).after('<span class="form-message label label-danger">' + message + '</span>');
                    if(focus_field == '')
                        focus_field = id;

                });
                $('#'+focus_field).focus();
            }
            if(response.success) {
                alert("Number 4");
                $('#give_away_form_message').after('<span class="form-message label label-success">' + response.success + '</span>');
                $this[0].reset();
            }
        }
    });
});