How To Get HTML Select Option Text And Post To PHP Variable Using Jquery/Ajax

Question

HTML

<form method="post">
    <select name="MySelect" onchange="run(this)">
        <option value="year 1">year 1</option>
        <option value="year 2">year 2</option>
        <option value="year 3">year 3</option>
    </select>
</form>

I am trying to get the selected option text and store this in a php variable. To use later down the page.

The onChange event calls the run() function. In my script.js file.

Js/Ajax

function run(sel) {

    var i = sel.selectedIndex;
    alert(i);
    alert(sel.options[i].text);
    if (i != -1) {

        $.ajax({
            type: "POST",
            url: "home.php",
            data: { opValue : sel.options[i].text},
            success: function(data)
            {
                alert(data);
            }
        });
    }
}

The data opValue gets stored in the $_POST array. Then below i am trying to print the array, store in variable

Home.php

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

Though it doesn't work, it doesn't reach the echo set. Which suggest the post variable is not being set. What am i doing wrong here, this is fairly new to me and i am still a beginner in php/ajax/js.

P.S i have opted to do it this way as i do not want the page to reload/refresh.

regards.

EDIT:

Added alert(data)

Now when i select year 2 in the response i am receiving this notable info.

Array
(
    [opValue] => year 2
)
1year 2year 2Array
(
    [opValue] => year 2
)

"it doesn't reach the echo set" — How do you know? What are you doing to look at the response? — Quentin
– Quentin, Commented Jul 30, 2014 at 12:50
not related but you could use $(sel).val() to get the selected value — Pete
– Pete, Commented Jul 30, 2014 at 12:51
Please stop user alert() for troubleshooting. Use console.log() instead. — Jay Blanchard
– Jay Blanchard, Commented Jul 30, 2014 at 12:52
Your echos should be returned in the data object so console.log the data to see if it is there rather than just alerting success — Pete
– Pete, Commented Jul 30, 2014 at 12:55

Olive · Accepted Answer · 2021-04-13 15:32:52Z

1

You need a function for this. Just call the function anywhere you want it to show the options.

function mySelect(){

    $optArray = array('year 1','year 2','year 3');
    $options = '';
    foreach($optArray as $items){
        $options.="<option value='$items'>" . $items ."</option>";
    }
    return $options;
}

Call the function:

<select>
  <?= mySelect() ?>
</select>

answered Apr 13, 2021 at 15:32

Olive

112 bronze badges

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

1 Comment

mickmackusa Over a year ago

It is never needed or beneficial to repeat the option's text as its value attribute -- just omit the value attribute from the HTML.

Quentin · Accepted Answer · 2014-07-30 13:02:51Z

0

You can't see the data being echoed out of PHP because you aren't looking at the data you are getting.

Your JavaScript is accepting the HTTP response, and then alerting "Success".

Alert the data argument to the success function instead.

answered Jul 30, 2014 at 13:02

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

20 Comments

user1638362 Over a year ago

Edit this answer with solution if you have found problem, ty

Quentin Over a year ago

The problem was that you weren't looking at the data you were getting back. Now you are. The solution is "Look at data".

user1638362 Over a year ago

Do i need to assign OpValue to Data In the success function?

Quentin Over a year ago

@user1638362 — You already are. That is what echo $option ; is doing already.

user1638362 Over a year ago

So i am not seeing it on the page, only in the Http response. So i need to look for something to output the http response $option var to the page? Am i on the right lines? :/

|

Collectives™ on Stack Overflow

How To Get HTML Select Option Text And Post To PHP Variable Using Jquery/Ajax

2 Answers 2

1 Comment

20 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

20 Comments

Your Answer

Sign up or log in

Post as a guest

Related