cross-domain form post with ajax jsonp returns error: {"readyState":4,"status":200,"statusText":"success"}

Question

I'm trying to post form data to a php file that will then handle a mysql request. But before I do the mysql, I'm trying to connect to the php file.

The request is Cross-Domain.

When i submit the form, i get the error: {"readyState":4,"status":200,"statusText":"success"}

You can see the test page here: http://jonathan-tapia.mybigcommerce.com/store-locator/

form code:

<div class="map-search">
    <h1>Give us your zip code. We'll tell you where to find us.</h1>
    <div id="map-form">
        <form id="lookup-form" action="http://dev.visioncourse.com/customers/baldguy/index.php" method="post">
            <p>Within
                <select id="distance" name="distance">
                    <option value="10">10</option>
                    <option selected="selected" value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                miles of 
                <input id="zipcode" type="text" name="postalcode" value="" size="8" /> 
                <input id="lookup" type="submit" value="Look Up" />
            </p>
        </form>
    </div>
</div>
<div class="map-results">&nbsp;</div>

updated JS:

<script type="text/javascript">// <![CDATA[
//submit form
$('#lookup-form').submit(function(event) {
    event.preventDefault();
    var formdata = $(this);
    var link = formdata.attr('action');
    var distance = $('#distance').val();
    var zipcode = $('#zipcode').val();
    console.log('.\n..\n...\n....\nSubmitting Form\n....\n...\n..\n.');
    $.ajax({
        crossDomain: true,
        type: 'POST',
        url: link,
        data: {
            'distance': distance,
            'postalcode': zipcode
        },
        dataType: 'jsonp',
        error: function(data) {
            console.log('error: ' + data);
        },
        success: function(data) {
            console.log('success: ' + data);
        },
        xhrFields: {
            withCredentials: true
        }
    });
});

// ]]>

updated php file:

<?php
$arr = array();
$distance = $_POST['distance']
$zip = $_POST['postalcode'];
if(isset($distance) && isset($zip)) {
    array_push($arrr, {'d': $distance, 'z': $zip});
}
echo json_encode($arr);

?>

error i'm receiving from console:

GET http://dev.visioncourse.com/customers/baldguy/index.php?callback=jQuery17203092896034941077_1451698154204&distance=25&postalcode=85251       jquery.min.js:4

EDIT: The php file will get the distance and zip code from the form and connect to a mysql database for a google maps store locator. so when a person submits the radius and the zip code it will display results. but all of this will be on the php file.

The file doing the form submission will submit the form, wait for the php to do it's work, then display the php file with the results

Answer 1

Try it with data: {"distance": distance, "zipcode": zipcode},. In your code you insert the value of the variables twice instead of a name and a value.

Also, you need to send the zipcode with the name of 'postalcode'. Otherwise your phpscript wouldn't find it.

Answer 2

you can try this way:

javascript:

<script>
var formdata = $(this);
var link = formdata.attr('action');
var distance = $('#distance').val();
var zipcode = $('#zipcode').val();
$.ajax({
   type: 'GET',
   url: link,
   data: {"distance": distance,"postalcode": zipcode},
   async: false,
   jsonpCallback: 'jsonp_callback',//name of function returned from php
   contentType: "application/json",
   dataType: 'jsonp',
   success: function(r) {
       console.log(r);
   },
   error: function(e) {
        alert(e.message);
   }
});
</script>

php:

<?php
$arr = array();
$distance = $_GET['distance'];//sample 123
$zip = $_GET['postalcode'];//sample 65455
if(isset($distance) && isset($zip)) {
    $arr = array('d'=> $distance, 'z'=> $zip);
}
$json = 'jsonp_callback(';
$json .= json_encode($arr);
$json .= ');';
echo $json;
?>

response:

jsonp_callback({"d":123,"z":65455});