CODEWITHSUNDEEP
phpjqueryajaxhttprequest
Christoph
Christoph

Reputation: 133

jQuery GET Data from a select-option

I would like to send GET-Data from a Form-SELECT to a PHP-Script. Actually I've the following parts:

$.myload = function(query) {
$("#output").load("my_php_script.php");
}

The HTML:

 <form id="foo" method="post" name="bar">
 <select name="xxx">
 <option value="1" onclick="$.myload();">1</option>
 <option value="2" onclick="$.myload();">2</option>
 <option value="3" onclick="$.myload();">3</option>
 </select>
 </form>
 <!-- Something Else -->
 <div id="output">
 <!-- Paste Content from my_php_script.php -->
 </div>

The PHP (my_php_script.php):

<?php echo "Hello World!"; ?>

That works fine for me. By clicking an option the Content "Hello World" is shown in the "output-DIV". Now I want to send the value of the clicked/selected Option field. Example: A click on the first option should load the content of the script "my_php_script.php?value=1". Can anybody help me?

Upvotes: 0

Views: 1078

Answers (2)

Adil Shaikh
Adil Shaikh

Reputation: 44740

change your option like this -

<option value="1" onclick="$.myload(this);">1</option>

and in your function- 

$.myload = function(query) {
  $("#output").load("my_php_script.php?value="+query.value);
}

Edit : Another approach -

Remove onclick attribute from your option's

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>

Change your query like this -

$.myload = function () {
    $("#output").load("my_php_script.php?value=" + this.value);
}
$('select[name=xxx]').on('change', $.myload);

Demo --> http://jsfiddle.net/4xt4j/

Upvotes: 0

netvision73
netvision73

Reputation: 4921

You can use on your first $.myload parameter (with an onclick, the first parameter is the onclick event), and get data from event.currentTarget.value

Upvotes: 3

Related Questions