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!

You really need to look into prevention of SQL injection.; You are extremely vulnerable at this point. You also should be using mysqli or PDO for MySQL access in PHP as mysql_* functions are deprecated. — Mike Brant
– Mike Brant, Commented Dec 20, 2013 at 22:12

Barmar · Accepted Answer · 2013-12-20 21:42:22Z

1

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.

answered Dec 20, 2013 at 21:42

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Deryck · Accepted Answer · 2013-12-20 21:43:36Z

0

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

answered Dec 20, 2013 at 21:43

Deryck

7,6662 gold badges27 silver badges44 bronze badges

Collectives™ on Stack Overflow

jquery ajax request no displaying php result

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related