How do I submit form data from jQuery to PHP?

Question

I'm tryin t validate the contact form with JQuery and if everything is alright, submit the data to a php file for sending to the mail but I keep getting the 'Access-Control-Allow-Origin'. I fthe page is on "exploitrip.com", this is the error I receive in browser console

XMLHttpRequest cannot load http://www.exploitrip.com/testing/mailer.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://exploitrip.com' is therefore not allowed access.

If the page is on "www.expoitrip.com", the error is

POST http://www.exploitrip.com/testing/mailer.php 404 (Not Found)

I tried adding

<?php header('Access-Control-Allow-Origin: *'); ?>

tag but still get the same error. Got any ideas?

Here's the HTML form

<form class="form-horizontal">
     <p id="returnmessage"></p>
     <input type="text" id="inputName" name="inputName" class="form-control max-width" placeholder="Name">
     <input type="text" id="inputPhone" name="inputPhone" class="form-control max-width" placeholder="Phone/Email">
     <!--<input type="text" name="inputEmail" class="form-control" placeholder="My email address is...">-->
     <div class="input-group">
          <select id="inputPackage" name="inputPackage" class="form-control max-width">
               <option value="None">Base Package</option>
               <option value="Swiss-Honeymoon">Swiss Honeymoon</option>
               <option value="Panoramic-Europe">Panoramic Europe</option>
               <option value="Treasures-of-Europe">Treasures of Europe</option>
               <option value="Wonders-of-Europe">Wonders of Europe</option>
               <option value="European-Delights">European Delights</option>
          </select>
     </div>
     <textarea id="inputMessage" name="inputMessage" class="form-control max-width" placeholder="Special requests or custom requirements (Optional)" rows="3"></textarea>
     <div class="text-center">
          <input id="q-submit" type="button"  class="btn btn-lg btn-default btn-query" value="Book Now">
     </div>
</form>

Here's the jquery

$(document).ready(function($){

        $("#q-submit").on('click', function() {
            var name = $("#inputName").val();
            var phone = $("#inputPhone").val();
            var package = $("#inputPackage").val();
            var message = $("#inputMessage").val();
            var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/;
            $("#returnmessage").empty(); // To empty previous error/success message.
            // Checking for blank fields.
            $('.form-horizontal input').on('focus', function(){
                $("#returnmessage").empty();
            })
            if (name == '' || phone == '' || package == '') {
                $("#returnmessage").empty()
                        .append('Please fill all the required fields');
            }
            else if (!phone.match(/^\d{6,10}$/) && !phone.match(/^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i)) {
                $("#returnmessage").empty()
                    .append('Please Enter a valid Phone number or Email Address');
            }
            else {
                console.log('query in last else');
                // Returns successful data submission message when the entered information is stored in database.
                $.post("../mailer.php", {
                    inputName: name,
                    inputPhone: phone,
                    inputPackage: package,
                    inputMessage: message
                });
            }
        });

});

Edit: Thanks to @jeroen the problem is fixed, I'm able to send the mail but the whole thing still doesn't work as intended. I don't get forwarded to the thank you page. here's the php

<?php

$myemail = "email@test.com"; //changed

date_default_timezone_set("Asia/Kolkata"); 

$name = $_POST['inputName'];
$phone = $_POST['inputPhone'];
$package = $_POST['inputPackage'];
$message1 = $_POST['inputMessage'];
$time = date("g:i:s a");
$ip = $_SERVER['REMOTE_ADDR'];

$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$subject = "Query at $time from Europe Landing Page";

$message = '<html><body>';
$message .= '<h1>Query Submitted on Singapore Landing Page:</h1>';
$message .= '<table rules="all" style="border-color: #666;width:400px;" cellpadding="10"><tr style="background:#0884d3;color:#ffffff;"><td colspan="2" align="center">Customer Details</td></tr>';
$message .= '<tr><td style="width:200px;">IP</td><td style="width:200px;">' . $ip . '</td></tr>';
$message .= '<tr><td>Name</td><td>' . $name . '</td></tr>';
$message .= '<tr><td>Phone/Email</td><td>' . $phone . '</td></tr>';
$message .= '<tr><td>Package</td><td>' . $package . '</td></tr>';
$message .= '<tr><td>Message</td><td>' . $message1 . '</td></tr>';
$message .= '</table></body></html>';

mail($myemail, $subject, $message, $headers);

header('Location: thank-you.html');
exit();
?>

Answer 1

You have to do the redirection in the JavaScript, not the PHP.

...
else {
  console.log('query in last else');
  // Returns successful data submission message when the entered information is stored in database.
  $.post("../mailer.php", {
      inputName: name,
      inputPhone: phone,
      inputPackage: package,
      inputMessage: message
  }, function() {
      window.location('thankyou.html');
  });
}