jquery ajax request no displaying php result

Question

I have a two-part ajax form that submits data to a php file to process the request on the server-side and return the results.

Here is the HTML form:

<div id="new_loc">
  <form id="loc_form" method="post" action="">
    <p><b>Country Name</b><br />
    <select id="country" name="country" tabindex="1">
    <option value="">Choose One</option>
    <?php
      $cq = mysql_query("SELECT * FROM crm_countries WHERE country_status = '1' ORDER BY country_name ASC");
      while($rowc = mysql_fetch_assoc($cq)) {
      echo '<option value="' . $rowc['country_code'] . '">' . ucwords(strtolower($rowc['country_name'])) . '</option>';
      }
    ?>
    </select></p>
    <p id="state_list"><b>State Name</b><br />
    <select id="state" name="state" tabindex="2">
    <option value="">Choose One</option>
    </select></p>
    <p><b>City Name</b><br />
    <input type="text" id="city" name="city" size="30" tabindex="3" /></p>
    <p><b>Zip Code</b><br />
    <input type="text" id="zip" name="zip" size="7" tabindex="4" /></p>
    <p><input type="submit" id="save_zip" name="save_zip" value="Save" tabindex="5" /></p>
  </form>
</div>

Then here is my jquery code to send the data to the PHP file and receive the response:

$(function(){

    // THE AJAX QUERY TO GET THE LIST OF STATES BASED ON THE COUNTRY SELECTION
    $('#country').change(function(){

        // DISPLAYS THE LOADING IMAGE
        $("#state_list").html('<img src="images/Processing.gif" />');

        var ctry = $('#country').val();

        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: {c:ctry}
        }).done(function(result) {
            $("#state_list").html("<b>State Name</b><br />" + result);
        });
    });

    // THE AJAX QUERY TO SAVE THE NEW ZIP CODE TO THE DATABASE
    $('#loc_form').submit(function(){

        // DISPLAYS THE LOADING IMAGE
        $("#new_loc").html('<img src="images/Processing.gif" />');

        var sz = $('#save_zip').val();
        var ct = $('#country').val();
        var st = $('#state').val();
        var ci = $('#city').val();
        var zc = $('#zip').val();

        $.ajax({
            type: "POST",
            url: "ajax.php",
            datatype: "text",
            data: {save_zip:sz,country:ct,state:st,city:ci,zip:zc}
        }).done(function(result) {
            $("#new_loc").html(result);
        }).fail(function() {
            $("#new_loc").html('<div class="failure">An error occurred. The form could not be submitted.</div>');
        });
    });
});

And lastly here is the PHP code (in one file called ajax.php) that processes the code:

<?php
session_start();

require ROOT_PATH . '/config.php';
require LAN_PATH . 'english.php';


// GETS THE STATE LIST BASED ON THE COUNTRY SELECTED
if($_POST['c']) {
  $sq = mysql_query("SELECT * FROM crm_states WHERE state_country = '{$_POST['c']}' ORDER BY state_name ASC");
  $sRows = mysql_num_rows($sq);

  if($sRows < '1') {
    $result = '<i>Error: No states found!</i>';
  }
  else {
    $result .= '<select id="state" name="state" tabindex="2">';
    while($rows = mysql_fetch_assoc($sq)) {
      $result .= '<option value="' . $rows['state_abbr'] . '">' . $rows['state_name'] . '</option>';
    }
    $result .= '</select>';
  }

  echo $result;
}


// SAVES THE NEW ZIP CODE TO THE DATABASE
if($_POST['save_zip']) {  
  $zcq = mysql_query("SELECT * FROM crm_zip_codes WHERE zip_code = '{$_POST['zip']}' AND zip_state = '{$_POST['state']}' AND zip_country = '{$_POST['country']}'");
  $zcRows = mysql_num_rows($zcq);

  if($zcRows == '1') {
    $result = '<div class="failure">' . ZIP_EXISTS . '</div>';
  }
  else {
    $azq = mysql_query("INSERT INTO crm_zip_codes VALUES('{$_POST['zip']}','{$_POST['city']}','{$_POST['state']}','{$_POST['country']}','','1')");
    $azRows = mysql_affected_rows();

    if($azRows != '1') {
      $result = '<div class="failure">' . ZIP_ERROR . '</div>';
    }
    else {
      $result = '<div class="success">' . ZIP_ADDED . '</div>';
    }
  }

  echo $result;
}

?>

The first AJAX call seems to work just fine. The data is submitted to the PHP file and a result is returned -> Either the values for the state select form, or the text error message.

The second AJAX call is giving me problems. The information appears to be submitted, but no result (positive or negative) is retunred from the PHP file. I have tested the PHP file through direct $_GET and $_POST requests and it works fine.

I am very new to jQuery, so I don't know where I'm getting stuck. Any help is greatly appreciated.

Thanks!

Answer 1

The submit event is being called and your <form> is directing the browser to nowhere action=""

Either don't use a submit button (aka use <input type="button"> or <button>) which would also require changing .submit() to .click() or use the submit button but cancel the default action.

$('#loc_form').submit(function(evt) {
    var e = evt || window.event;
    e.preventDefault();
    ...
});

Cheers

Answer 2

You need:

$('#loc_form').submit(function(e){
    e.preventDefault();
    ...
});

preventDefault() is needed to prevent the default submission of the form from occurring after the handler runs. The normal submission was reloading the page.