CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Krishna
Krishna

Reputation: 41

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

Problem

I want to use the select tag to select a value and send the value using ajax call to a PHP embedded in the same page.

Here, in my code, I am using the select tag and as soon as I select any value from the drop-down, the value is being sent to the javascript and being alerted properly. But when I $_POST['option'] in PHP and echo it, it is not getting printed on the page.

I know PHP is a server-side language and anything written in PHP executes first when a page is loaded.

tablesize.php

<html>
    <head>
        <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: 'tablesize.php',
                datatype:'json',
                data: {option:val},
                success: function (response) {
                    alert(val);
                    //document.getElementById("new_select").innerHTML=response; 
                }
            });
        }
    </script>
    </head>
    <body>
        <p id="heading">Dynamic Select Option Menu Using Ajax and PHP</p>
        <center>
        <div id="select_box">
            <select onchange="fetch_select(this.value);">
                <option value="10">state</option>
                <option value="20">20</option>
            </select>
        </div>
    </body>
</html>
<?php
    if(isset($_POST['option'])){
        $val=$_POST['option'];
        echo $val;
    }
?>

Thanks...

Upvotes: 1

Views: 7724

Answers (4)

Sani mori
Sani mori

Reputation: 309

same page ajax calling and echo value 

<?php
        session_start();
        ?>
    <html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function(){
                    $(document).on("change","#sel",function(){
                        var val = $(this).val();
                        console.log(val);
                        $.ajax({
                            type: 'post',
                            url: 'index.php?action=data',
                            datatype:'json',
                            data: {"option":val},
                            success: function (response) {
                                alert(val);
                                location.href="index.php";

                            }
                        });
                    });

                });
            </script>
        </head>
        <body>
            <div id="select_box">
                <select id="sel" name="sel">
                    <option <?php if($_SESSION['val']=="a") echo "selected" ;?> value="a">a</option>
                    <option <?php if($_SESSION['val']=="b") echo "selected" ;?> value="b">b</option>
                    <option <?php if($_SESSION['val']=="c") echo "selected" ;?> value="c">c</option>
                    <option <?php if($_SESSION['val']=="d") echo "selected" ;?> value="d">d</option>
                    <option <?php if($_SESSION['val']=="e") echo "selected" ;?> value="e">e</option>
                    <option <?php if($_SESSION['val']=="e") echo "selected" ;?> value="f">f</option>
                </select>
            </div>
        </body>
    </html>
    <?php
        $val = $_POST['option'];
        if($_REQUEST['action']=="data"){
            $_SESSION['val']=$val;
            echo "Selected value = ".$_SESSION['val'];
        }elseif ($val=="") {
            echo "Selected value = ".$_SESSION['val'];
        }
    ?>

Upvotes: 1

Karlo Kokkak
Karlo Kokkak

Reputation: 3714

You are printing the wrong variable on ajax post success. You needed response variable to alert of PHP script's output.

Also put the PHP post handler block to the top of the page so that HTML contents will not be included in the response for AJAX.

Updated Code:

<?php
    if(isset($_POST['option'])){
        $val=$_POST['option'];
        echo $val; exit;
    }
?>
<html>
    <head>
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
        <script type="text/javascript">
        function fetch_select (val){
            $.ajax({
                type: 'post',
                url: 'tablesize.php',
                datatype:'json',
                data: { option:val },
                success: function (response) {
                    alert(response);
                }
            });
        }
    </script>
    </head>
    <body>
        <p id="heading">Dynamic Select Option Menu Using Ajax and PHP</p>
        <center>
        <div id="select_box">
            <select onchange="fetch_select(this.value);">
                <option value="10">state</option>
                <option value="20">20</option>
                <option value="30">30</option>
            </select>
        </div>
    </body>
</html>

Upvotes: 0

Gyandeep Sharma
Gyandeep Sharma

Reputation: 2327

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;

Upvotes: 0

Dilip Solanki
Dilip Solanki

Reputation: 437

Different ajax.php and write code here and url change in your ajax code.

Ajax.php

<?php
if(isset($_POST['option']))
{
   $val=$_POST['option'];
   echo $val;  
}
?>

Your ajax code...

function fetch_select(val){
        $.ajax({
            type: 'post',
            url: 'ajax.php',
            datatype:'json',
            data: {option:val},
            success: function (response) {
                alert(response);
                //document.getElementById("new_select").innerHTML=response; 
            }
        });
    }

Upvotes: 0

Related Questions