JQuery AJAX POST is not sending data to PHP file

Question

I have spent the whole of today trying to figure what is wrong with and I have read a lot of similar problems here but this seems to be a peculiar issue.

I want an AJAX call to fill a dropdown list base on previous selection from MySQL database but it is not working as the POST is not sending any data to PHP $id = $_POST['id'] file I am sending it to. However, if I assign a constant value to it (say $id = 1), it works just fine and return the expected data from the database.

This is the AJAX code:

<script type="text/javascript">
$(document).ready(function()  
     { 

      $("#state").change(function()  
      {  

     var menuId = $(this).val();

        var request = $.ajax({
          url: "schools.php",
          type: "POST",
          data: { id : menuId },
          dataType: "html"
        });

        request.done(function( msg ) {
          $("#schools").html( msg ); 
        });
      });  
     });  
</script>

And the PHP code:

<?php
include('../connection.php');


if(isset($_POST['id']) && $_POST['id'] != '')
  {
      $id = $_POST['id']; 
      $SQ = "SELECT c_name FROM courses WHERE fac_id = ?";
  $q = $conn->prepare($SQ) or die("ERROR: " . implode(":", $conn->errorInfo()));

    $q->bindParam(1, $id);
    $q->execute();
    $total = $q->fetchAll();

    $i=1;
     foreach ($total as $sch){
        echo "<option class = 'option' value = '$i'>". $sch[0].</option>";
        $i++;
      } 

}

?>

EDITTED:

This the HTML code:

<form class="form-horizontal">
    <!-- Form Name -->

    <!-- Select Basic -->
    <div class="control-group">
      <label class="control-label" for="selectbasic">State where your school is located</label>
      <div class="controls">
        <select id="state" name="state" class="form-control input-xlarge">
        <?php 
            $i=1;
          $SQ = "SELECT * FROM states";
          $schools = $conn->prepare($SQ);
          $schools->execute();
          $total = $schools->fetchAll();
          foreach ($total as $sch){
            echo "<option class = 'option' value = '$i'>". $sch[1]. "</option>";
            $i++;
          }

          ?>

        </select>
      </div>
    </div>

    <!-- Select Basic -->
    <div class="control-group">
      <label class="control-label" for="selectbasic">School</label>
      <div class="controls">
        <select name="school" id = 'schools' class="form-control input-xlarge">
          <?php 
            $i=1;
          $SQ = "SELECT * FROM schools";
          $schools = $conn->prepare($SQ);
          $schools->execute();
          $total = $schools->fetchAll();
          foreach ($total as $sch){
            echo "<option class = 'option' value = '$i'>". $sch[1]. "</option>";
            $i++;
          }

          ?>
        </select>
      </div>
    </div>
</form>

@RUJordan Could you post your HTML code that displays this dropdown list? — Leonardo
– Leonardo, Commented Nov 19, 2013 at 17:41
The first select option <select id="state" name="state" class="form-control input-xlarge"> on which I want the next drop down be depended on. — Yax
– Yax, Commented Nov 19, 2013 at 17:41
You have a rogue double quote in your PHP file. $sch[0].</option>"; should be $sch[0]."</option>"; — Sterling Archer
– Sterling Archer, Commented Nov 19, 2013 at 17:42

eg_dac · Accepted Answer · 2013-11-19 17:41:21Z

1

I'd try using straight up $.ajax instead of setting it to a variable.

$.ajax({
      url: "schools.php",
      type: "POST",
      data: { id : menuId },
      dataType: "html",
      success: function(data){
         append data stuff here.
      },
      error: function(xhr, status, error){
          console.log(error + " error from here");
      }
    });

using the error function you can print out your error if any is returned. it might help you debug your problem.

answered Nov 19, 2013 at 17:41

eg_dac

6994 silver badges14 bronze badges

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

3 Comments

Yax Over a year ago

I did that but it didn't report any error. I even used alert ('Success, it workd'); in the success function and it alert Success, it workd.

eg_dac Over a year ago

check in the networks tab and check the response from the php file. see if what its returning.

Yax Over a year ago

Just did that and everything seems to be working fine but under Params tab the right id is returned.

intractve · Accepted Answer · 2013-11-19 17:36:25Z

0

In some older versions of jQuery select never returned val() consistently. You can try and see if this works:

var menuId = $("option:selected",this).val();

Also, it may not be the case, but sometimes I found this works.

data: { 'id' : menuId }, //note the quotes

answered Nov 19, 2013 at 17:36

intractve

6,7511 gold badge16 silver badges12 bronze badges

1 Comment

intractve Over a year ago

Can you try console.log(menuId); or alert(menuId); even before you make the ajax call to check if the menuId is even being read.

user3009989 · Accepted Answer · 2013-11-19 18:02:21Z

0

How about just try the shorthand version and see if it helps.

$.post('schools.php',{ 'id' : menuId },function(d){
   $("#schools").html( d );
});

answered Nov 19, 2013 at 18:02

user3009989

1

Collectives™ on Stack Overflow

JQuery AJAX POST is not sending data to PHP file

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related