How to Post Selected Values Using Ajax

Send selected value to PHP via Ajax

Ajax calls accepts a JSON object to be passed to the server via the data options like this:

var your_selected_value = $('#select option:selected').val();
$.ajax({
  type: "POST",
  url: "your_url",
  data: {selected: your_selected_value},
  success: function(data) {
    // Stuff
  },
  error: function(data) {
    // Stuff
  }
});

On the server side you can get the value via the request params.

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

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

How to set a selected option using ajax?

You have forgotten to concatenate the real value:

$('#birth_month option[value="'+data.month+'"]').prop('selected', true);

This should to the trick but you can use an easier instruction:

$("#birth_month").val(data.month)

Post a selected option via ajax

Since you are already using jQuery, an easy solution would be to use its serialize function.

$.ajax({
    type: "POST",
    url: "test2.php",
    data: $('select#meal').serialize()
}).done(function(data) {

});

The nice thing about this solution is that you do not have to worry about encoding or the select allowing multiple selections.

Note that I assumed some HTML like this:

<select id="meal" name="meal">
    <option>Option 1</option>
    ...
</select>

Then, in your PHP script, you can simply access the value using the name of the input (in this case "meal") as the key in the $_POST array:

$meal = $_POST['meal'];

Cannot get select value using AJAX

So... You use a plugin to obtain a "fancier" select...

That plugin creates some new DOM elements... So the user do not really interact with the select of your original markup. It is only used to create the new ones... Then hidden.

Here is what's created as siblings of your <form>:

<div class="custom-select" style="width: 200px">
  <form method="get" name="rate">

    <select name="rate2" id="rate2">

      <option value="0">Broj Rata:</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
    </select>
  </form>
  <div class="select-selected">
    Broj Rata:
  </div>
  <div class="select-items select-hide">
    <div>Broj Rata:</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
  </div>
</div>

So we now need to use another selector to capture the user interaction.

Replace:

$("#rate2").on('change', function() {

with

$("[name='rate']+.select-selected+.select-items").on("click",function(){

The + sign in the selector is an "adjacent sibling selector". It targets the last one IF it immediately follows the previous (as a sibling in DOM).

And that makes the trick here very well.

CodePen

How to send the value of select tag using ajax to php residing on the same page

Here is your solution

The ajax success contains your result. The error is in your printing method.

You need a different file for ajax here I use ajax.php.

One more thing put scripts at last on HTML page always.

tablesize.php

<html>
    <head>

    </head>
    <body>
        <p id="heading">Dynamic Select Option Menu Using Ajax and PHP</p>
        <center></center>
        <div id="select_box">
            <select onchange="fetch_select(this.value);">
                <option value="10">state</option>
                <option value="20">20</option>
            </select>
        </div>
        <p id="print-ajax"></p><!--Result will print here-->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0 /jquery.min.js"></script>
        <script type="text/javascript">
            function fetch_select(val){
                $.ajax({
                    type: 'post',
                    url: 'ajax.php',
                    datatype:'json',
                    data: {option:val},
                    success: function (response) {
                        $('#print-ajax').html(response);//This will print you result
                    }
                });
            }
        </script>
    </body>
</html>

ajax.php

echo $_POST['option'];die;

Selected option value sending with ajax

$.ajax({
        url:'category.php',
        type: 'post',
        contentType: 'application/json',
        dataType: 'json',    //you forgot comma here
        data:JSON.stringify(items)
    });

you forgot comma here after this line dataType: 'json',

How to send select value to php using ajax?

You can use following example to get espace id in index.php.

$(document).ready(function () 
{
    $('#select').on('change', function () 
    {
        if ($('#select').val() === null) {              
            alert("Error");
        }
        else
        {
            var selectedValue = $('#select').val();

            $.ajax
            ({
                url: 'index.php',
                type: 'POST',
                data: 'espace_id=' + selectedValue,
                success: function(response) 
                {
                    alert(response);
                }
            });
        }
    });
});

on index.php

if(isset($_POST['espace_id']) && !empty($_POST['espace_id']))
{
  // do whatever you want to do here!!
}