CODEWITHSUNDEEP
phpjavascriptjquery
aherlambang
aherlambang

Reputation: 14418

javascript and PHP variable passing

I have two select box and the second select box value is dependent on the first select box. So basically what I am trying to do is that after a user makes a selection on the first select box, it will then store this value of the first select box as a variable. Then it will query my database to populate the second select box, based on the first selected value. Question is, how do I pass in the var I have in the first select box to PHP? I've read other post and people said it's impossible, but if it is then how do people do this? AJAX?

Upvotes: 0

Views: 381

Answers (7)

Omar Al-Ithawi
Omar Al-Ithawi

Reputation: 5160

I assume that you have a Country/City dropdowns, You can do it in two ways, the good AJAX way and the bad way (refresh page on change), I'm gonna describe the good way in jQuery, or at least what I see it good.

this is the client-side (i.e. client) code:

<select id="country">
  <option value="1">Canada</option>
  <option value="2">UK</option>
</select>
<select id="city" disabled="disabled"></select>
<script type="text/javascript">
  $('#country').change(function(){
      $('#city').load('/ajax-city.php', {id: $(this).val()});
  });
</script>

This is the ajax-city.php code (server):

<?php
$countryId = $_REQUEST['id'];
$cities = array(); // Get it from db, using mysql_query or anything you want to use
foreach($cities as $city) {
  echo "<option id=\"{$city['id']}\">{$city['name']}</option>";
}

PS. you would need to include jQuery in your html code, and of course put the two files in the same directory (or change the $.load path).

This particular code is not tested, I've just written it. But it usually works fine to me this way.

Upvotes: 0

Hubert_J
Hubert_J

Reputation: 453

If I see correct you're using Jquery. So you can do this like this:

$('#idOfSelectBox1').change(function(){
jQuery.ajax({
    type: "GET",
    url:"yourdomain.com/script.php",
    data:"selectBox:'"+$('#idOfSelectBox1').val()+"'",
    success:function(result){
        //do smth with the returned data
    }
});
});

in the script.php do your magic and echo what you want to pass back to js

Upvotes: 0

Your Common Sense
Your Common Sense

Reputation: 157839

Question is, how do I pass in the var I have in the first select box to PHP?

I see no problem here.
Just usual, an ordinary html form using GET method.
What's so big about it?

Upvotes: 0

kzh
kzh

Reputation: 20598

You will have an onchange event on the first <select> that will query the server using Ajax with the value of the selected <option> that will return the <option> elements with which to populate the 2nd <select> element.

Upvotes: 0

Rob W
Rob W

Reputation: 348972

Add a onchange event listener to the first select box:

document.getElementById("select1").addEventListener("change", function(ev){
   var yourstoredvariable = this.value;
   someFunctionThatCallsAjax(yourstoredvariable);
}, true);

Upvotes: 1

CodeCaster
CodeCaster

Reputation: 151586

Indeed, you can, with AJAX, call something like 'getSelectionData.php?data=' + select1.value, which returns a JSON array of data based on the selection in the first select box. You then parse the data and enter it into the second select box.

Upvotes: 1

Jonnix
Jonnix

Reputation: 4187

If I understand correctly, then yes, using AJAX is really your only choice.

Upvotes: 3

Related Questions