How do I send Select value to PHP with Jquery Ajax?

Question

First of all, thank you for taking a look at my question.

Also, I looked everywhere on Stackoverflow for a solution but I just can't get this to work.

So here's the problem, I need to get the value of a select option that is in file job.php and send it to portfolio.php so I can fetch the appropriate data from the database. Basically when I select another option I want the page to load the appropriate data.

Here's the Ajax (job.php)

<script>
  $( document ).ready(function() {
     var workselected = $('.work-select').val();
     $.ajax({
       method: "POST",
       url: "php/portfolio.php",
       data: {workselected1: workselected},
       success: function(data){
       console.log(data);
              }
          });
      });
</script>

Heres the Select tag I'm trying to get the value from (job.php)

<select id="select-work" class="work-select">
   <option class="work-option" value="fw">Option 1</option>
   <option class="work-option" value="bw">Option 2</option>
   <option class="work-option" value="lp">Option 3</option>
   <option class="work-option" value="et">Option 4</option>
   <option class="work-option" value="wa">Option 5</option>
</select> 

Here's the PHP that handles DB interaction (portfolio.php)

<?php
require_once('db.php');

if (isset($_POST['workselected1'])) {
    $workselected = $_POST['workselected1'];

    $query = mysqli_query($conn, "SELECT * FROM sometable WHERE project_category=`workselected`");
    $rowCount = mysqli_num_rows($query);

  } else echo "NOT WORKING";

    $i = 0;
    echo '<div class="row rowcontrol">';

    if($rowCount > 0){ 
        while($row = mysqli_fetch_assoc($query)){ 
    ?>

       <?php 
         echo '<div class="col-md-4 letmesee"><div class="work-content-container">'; ?>
        <a href="#"><img src="img/project/<?php echo $row['thumbnail_ref'] ?>" class="work-thumbnail"></a>
        <span class="caption slide-caption">
            <h5><?php echo $row['project_name']; ?></h5>
            <p><b>Project: </b><?php echo $row['project_type'];?></p>
            <p><b>Check: </b><a href="<?php echo $row["project_url"];?>" class="nav-link"><?php echo $row["project_url"]; ?></a></p>
        </span>
       <?php echo '</div></div>'; ?>

    <?php
     $i++;
     if ($i%3 == 0) echo '</div><div class="row">';

     } ?>

    <?php } ?>

I'm not getting anything from this code, the data is not passing to the other file, I think I'm missing something; Maybe I need to add a click event somewhere in there? please help!

Answer 1

You say Basically when I select another option I want the page to load the appropriate data . So you have to register a change listener then. Otherwise you only do it once at page load.

$(function() {
    $('.work-select').change(function() {
        $.ajax({
            method: "POST",
            url: "php/portfolio.php",
            data: {
                workselected1: $(this).val()
            },
            success: function(data){
                console.log(data);
            }
        });
    });
});

If you want an initial loading too, you can wrap the ajax within a function, or trigger it once manually.

$('.work-select').trigger("change");

Answer 2

You have not defined on which event you have to call AJAX. I am considering you call AJAX when value is changed in dropdown.

<script>
  $( document ).ready(function() {
    $('.work-select').change(function(){
        workselected=$(this).val();
        $.ajax({
           method: "POST",
           url: "php/portfolio.php",
           data: {workselected1: workselected},
           success: function(data){
            console.log(data);
          }
      });
    });
 });
</script>

If still not work then check then check if you have defined any redirection rules in .htaccess file.

Answer 3

Forgot to trigger on change for select dropdown.

<script>
$( document ).ready(function() {
  $('.work-select').change(function(){
    var workselected = $(this).val();
    $.ajax({
      method: "POST",
      url: "php/portfolio.php",
      data: {workselected1: workselected},
      cache:false,
      success: function(data){
        console.log(data);
      }
    });
  });
}); 
</script>

portfolio.php

1) Change

$query = mysqli_query($conn, "SELECT * FROM sometable WHERE project_category=`workselected`");

To

$query = mysqli_query($conn, "SELECT * FROM sometable WHERE project_category='$workselected'");

2) Keep below code inside if (isset($_POST['workselected1'])) { . Otherwise

undefined index : thumbnail_ref

error will come.

$i = 0;
.
.
.

if ($i % 3 == 0)
        echo '</div><div class="row">';

Updated Code

<?php
require_once('db.php');

if (isset($_POST['workselected1'])) {
  $workselected = $_POST['workselected1'];

  $query = mysqli_query($conn, "SELECT * FROM sometable WHERE project_category='$workselected'");
  $rowCount = mysqli_num_rows($query);

  $i = 0;
  echo '<div class="row rowcontrol">';

  if ($rowCount > 0) {
    while ($row = mysqli_fetch_assoc($query)) {

      echo '<div class="col-md-4 letmesee"><div class="work-content-container">'; ?>
      <a href="#"><img src="img/project/<?php echo $row['thumbnail_ref'] ?>" class="work-thumbnail"></a>
      <span class="caption slide-caption">
        <h5><?php echo $row['project_name']; ?></h5>
        <p><b>Project: </b><?php echo $row['project_type']; ?></p>
        <p><b>Check: </b><a href="<?php echo $row["project_url"]; ?>" class="nav-link"><?php echo $row["project_url"]; ?></a></p>
      </span>
      <?php echo '</div></div>'; ?>

      <?php
      $i++;
      if ($i % 3 == 0)
        echo '</div><div class="row">';
    }
  }

} else {
  echo "NOT WORKING";
}
?>

Answer 4

try to change this

$query = mysqli_query($conn, "SELECT * FROM sometable WHERE project_category=`workselected`");

with this

$query = mysqli_query($conn, "SELECT * FROM sometable WHERE project_category='".$workselected."'");