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.phpand 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!

@Mit.agile what are you talking about here? You don't solve the problem with this changes. And why such complicated selector? $('#select-work').val() will do the same. — eisbehr
– eisbehr, Commented Aug 24, 2016 at 9:05

eisbehr · Accepted Answer · 2016-08-24 08:58:02Z

4

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");

answered Aug 24, 2016 at 8:58

eisbehr

12.5k8 gold badges42 silver badges65 bronze badges

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

2 Comments

Bodil132 Over a year ago

Hey, Thank you for the answer, it seems to have worked. I'm getting the data into the file but the PHP output is not displaying on the page but it is displaying on the console, I'm getting the HTML of what is supposed to be displaying onscreen in the actual js console on Chrome. Any ideas here? last question I promise!

eisbehr Over a year ago

You have to do somthing with the data you received. Actually you only log them with console.log(data);. Thats the reason you only see it in console, and not in the page. I'm actually not sure what you want to do whit the html. But for example, you could append it under the select with something like $('.work-select').after(data). @Bodil132

Haresh Vidja · Accepted Answer · 2016-08-24 09:02:31Z

0

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.

answered Aug 24, 2016 at 9:02

Haresh Vidja

8,4713 gold badges29 silver badges44 bronze badges

Comments

Nana Partykar · Accepted Answer · 2016-08-24 09:46:14Z

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";
}
?>

Denny Sutedja · Accepted Answer · 2016-08-24 09:24:53Z

-1

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."'");

answered Aug 24, 2016 at 9:24

Denny Sutedja

5384 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related