Feedback Form jQuery returns no data

Question

I have an html page with an ajax query to a php file. This php file is supposed to send a message and then provide a response back to the ajax query. However, no matter what I do I can't get any response out of this ajax call. What am I doing wrong?

HTML:

<form id="feedback-form" method="post">
<table border="0" cellpadding="3">
<tr>
<td><h4>Name: </h4></td>
<td><input type="text" id="name"></input></td>
</tr>
<tr>
<td><h4>Company: </h4></td>
<td><input type="text" id="company_name"></input></td>
</tr>
<tr>
<td><h4>Email: </h4></td>
<td><input type="text" id="email"></input></td>
</tr>
<tr>
<td><h4>Feedback Category: </h4></td>
<td>
<select id="category">
<option class="placeholder" selected disabled>Select Category</option>
<option value="website">Site Issue</option>
<option value="content">Content Issue</option>
<option value="suggestion">Content Suggestion</option>
</select>
</td>
</tr>
<tr>
<td><h4>Message: </h4>(include as much detail as possible)</td>
<td><textarea id="message" style="resize: none;" rows="5"></textarea></td>
</tr>
<tr>
<td><h4>Attachment: </h4>(include any material relevant to your request)</td>
<td><input type="file" id="files" multiple></input></td>
</tr>
<tr>
<td><input type="submit" value="Send"></input></td>
</tr>
</table>
</form>
<span id="feedbackResponse"></span>

JS:

$('#feedback-form').on('submit', function (e) {
          e.preventDefault();

          $.ajax({
            type: 'POST',
            url: '/RK/sendFeedback.php',
            data: $('#feedback-form').serialize(),
            success: function (response) {
              $('#feedbackResponse').html(response);
        },
            error: function (response) {
              $('#feedbackResponse').html(response);
            }
          });

        });

PHP:

<?php
require '/RK/PHPMailerAutoload.php';

$mail = new PHPMailer;

$mail->isSMTP();                                      // Set mailer to use SMTP
$mail->Host = '******.100';                       // Specify main and backup server
$mail->SMTPAuth = true;                               // Enable SMTP authentication
$mail->Username = 'email@email.com';                   // SMTP username
$mail->Password = 'password';               // SMTP password
$mail->SMTPSecure = 'tls';                            // Enable encryption, 'ssl' also accepted
$mail->Port = 587;                                    //Set the SMTP port number - 587 for authenticated TLS
$mail->setFrom('email@email.com', 'DataMotion Wiki');     //Set who the message is to be sent from
$mail->addReplyTo('email@email.com', 'No Reply');  //Set an alternative reply-to address
$mail->addAddress('email@email.com', 'No Reply');  // Add a recipient
$mail->WordWrap = 50;                                 // Set word wrap to 50 characters

$mail->isHTML(true);                                  // Set email format to HTML

$mail->Subject = 'DataMotion Wiki Feedback';
$mail->Body    = '<b>From:</b> '.$_POST['email'].'<br/><b>Category:</b> .$_POST['category'].<br/><b>Message:</b> .$_POST['message']
 echo 'Just before sending';
if(!$mail->send()) {
   echo 'Message could not be sent.';
   echo 'Mailer Error: ' . $mail->ErrorInfo;
   exit;
}

echo 'Thank you for your feedback. Your message has been sent';
?>

Answer 1

Perhaps, your JS code placed above the form. So, in this case you need to wrap it into ready function because the feedback-form doesn't exists at the moment where your JS now. So, your code is trying to handle unexisting element. Ready function runs everything inside only after the DOM is loaded

So, this can work for you

$(function(){
        $('#feedback-form').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'sendFeedback.php',
                data: $('#feedback-form').serialize(),
                success: function (response) {
                    $('#feedbackResponse').html(response);
                },
                error: function (response) {
                    $('#feedbackResponse').html(response);
                }
            });

        });
    });

Also, add method="POST" to your form, since GET is default form method