Ajax Form seems to post, but does not return

Question

I have a very simple form with 3 checkboxes allowing users to flag a video as inappropriate. I'm trying to make a simple ajax request to create an email, and give the user some feedback. The form seems to post, and the info is being sent in the headers, but nothing is being returned.

I'm really new to using ajax, so I'm sure I just missing something.

template-file.php:

<script type="text/javascript">
                          var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
                            $(window).load(function(){
                                $('[id^=report-form-]').submit(function() {
                                       $.ajax({
                                       type: "POST",
                                       url: ajaxurl,
                                       action : "trailer_report",
                                       data: {
                                        inappropriate : 'test',
                                        subject : $('#subject',this).val(),
                                        dvdname : $('#dvdname',this).val(),
                                        dvdnum : $('#dvdnum',this).val(),

                                       },
                                       success: function(msg){
                                            $("#note").ajaxComplete(function(event, request, settings)
                                            {
                                                if(msg == "OK") // Message Sent? Show the Thank You message and hide the form
                                                {
                                                    result = "Your report has been sent. Thank you!";
                                                    $("#fields").hide();
                                                }
                                                else
                                                {
                                                    result = msg;
                                                }
                                                $(this).html(result);
                                            });
                                        }
                                     });
                                    return false;
                                });
                            });
                        </script>
                      <div id="reportTrailer-<?php echo $i; ?>">
                      <div id="fields">
                      <form id="report-form-<?php echo $i; ?>" class="form-inline" method="post" action="">
                              <label class="checkbox">
                                <input type="checkbox" name="inappropriate" id="inappropriate" value=""> Inappropriate
                              </label>
                              <label class="checkbox">
                                <input type="checkbox" name="incorrect" id="incorrect" value=""> Incorrect Trailer
                              </label>
                              <label class="checkbox">
                                <input type="checkbox" name="copyright" id="copyright" value=""> Copyright Infringement
                              </label>
                            <button class="btn btn-primary pull-right" type="submit" name="Submit" id="gcpl_rt_send"><i class="icon-circle-arrow-right"></i> Send Report</button>
                            <input type="hidden" name="reported" id="reported" value="true" />
                            <input type="hidden" name="subject" id="subject" value="Explore DVD Trailer Reported" />
                            <input type="hidden" name="dvdname" id="dvdname" value="<?php echo $results[$key]['title']; ?>" />
                            <input type="hidden" name="dvdnum" id="dvdnum" value="<?php echo $results[$key]['stdnum']; ?>" />
                        </form>
                      </div> <!-- endfields -->
                        <div id="note"></div>
                      </div>

functions.php:

add_action('wp_ajax_nopriv_trailer_report', 'trailer_report');
add_action('wp_ajax_trailer_report', 'trailer_report');

function trailer_report() {
    $post = (!empty($_POST)) ? true : false;

    if($post) {
        $noneError = "";
        $inappropriate = "";
        $incorrect = "";
        $copyright = "";

        if(!isset($_POST['inappropriate']) && !isset($_POST['incorrect']) && !isset($_POST['copyright'])) {
            $noneError = 'Please select one or more reasons for reporting this trailer.';
            $hasError = true;
            $inappropriate = "";
            $incorrect = "";
            $copyright = "";
        } else {
            if(isset($_POST['inappropriate'])) {
            $inappropriate = 'Inappropriate Content';
            }
            if(isset($_POST['incorrect'])) {
            $incorrect = 'Incorrect Trailer';
            }
            if(isset($_POST['copyright'])) {
            $copyright = 'Copyright Infringement';
            }
        }

        $subject = trim($_POST['subject']);;
        $moviename = trim($_POST['dvdname']);;
        $movienum = trim($_POST['dvdnum']);;

        if(!isset($hasError)) {
            $emailTo = '[email protected]';
            if (!isset($emailTo) || ($emailTo == '') ){
                $emailTo = get_option('admin_email');
            }
            $subject = 'The Trailer for  '.$moviename.' has been reported';
            $body = "Movie Name: $moviename \n\nMovie Standard Number: $movienum \n\nReported for: $inappropriate \n\n$incorrect \n\n$copyright ";
            $headers = 'From: report <[email protected]>' . "\r\n";

            $mail = wp_mail($emailTo, $subject, $body, $headers);
            $emailSent = true;

            if($mail) {
                echo 'OK';
            }
        } else {
                echo '<div class="notification_error">'.$noneError.'</div>'; // set up error div for jQuery/Ajax
        }
    }
die();
}

Any help to see where I'm going wrong is greatly appreciated. Thank you.

Answer 1

Your settings object in ajax call is not properly set up: action should be inserted in the data object.

For example:

$.ajax({
    url: ajax_url,
    data:{
        action: 'trailer_report',// action must be set here
        // other stuff here
    }
    //other ajax stuff
});

Hope it helps!