CODEWITHSUNDEEP
javascriptphpjquery
javed
javed

Reputation: 43

How to Pass Two or More Variables via jQuery Load

I have got the world database from here: https://code.google.com/p/worlddb/

I have set up the database and by using php, mysql and jquery i am trying to generate a three level select drop down to generate city list from regions and countries.

What I am doing is to select countries drop down that loads external file via jquery containing regions. Then selecting regions, triggers another external load via jquery to populate cities.

$(document).ready(function() {
// get states names based on country drop down
$("#ddCountry").change(function() {
$("#ddStates").load("includes/getStates.php?choice2=" + $("#ddCountry").val());
$("#ddCountryCode").load("includes/getCountryCode.php?choice1=" + $("#ddCountry").val());
});
// get city name for specific state
$("#ddStates").change(function() {
$("#ddCity").load("includes/getCities.php?choice3=" + $("#ddStates").val());
});
});

This is working fine. The problem is that cities table requires two parameters to load cities from a region. One is region code and the other is country code. I have populated the country code when i select the country at the same page as $choice1.

I need this part

$("#ddStates").load("includes/getStates.php?choice2=" + $("#ddCountry").val());

to pass two variables not one. Currently its passing single variable #ddCountry value. I need to pass it more value that is #ddCountryCodeGot that is being retrieved as an input value in the id #ddCountryCode.

How can i pass two variables to the page that is calling cities via this line

$("#ddStates").load("includes/getStates.php?choice2=" + $("#ddCountry").val());

If I do kike this:

$("#ddStates").load("includes/getStates.php?choice2=" + $("#ddCountry").val()&choice4=" + $("#ddCountryCodeGot").val());

It triggers an error. Thanks in advance.

Got the solution from answer below: Here is updated correct code that is working.

$(document).ready(function() {
// get states names based on country drop down
$("#ddCountry").change(function() {
$("#ddStates").load("includes/getStates.php?choice2=" + $("#ddCountry").val());
$("#ddCountryCode").load("includes/getCountryCode.php?choice1=" + $("#ddCountry").val());
});
// get city name for specific state and the country code - passing two variables to the cities page
$("#ddStates").change(function() {
$("#ddCity").load("includes/getCities.php",{choice3:$("#ddStates").val(),choice4:$("#ddCountryCodeGot").val()});
});
});

UPDATE While above method is working As Du D also suggested below in comments - it can also be done like below:

$("#ddCity").load("includes/getCities.php?choice3=" + $("#ddStates").val() + "&choice4=" + $("#ddCountryCodeGot").val());

Upvotes: 1

Views: 1571

Answers (2)

BergBrains
BergBrains

Reputation: 302

This brings up an aspect of the jquery ajax methods that I really like, which is the ability to provide a hash of values for a URI that get passed as HTTP params. This allows you to retain discrete data, avoiding the escaping nightmare of cobbling together strings for URIs.

Referring to optional 'data' the prototype for .load in the docs:

.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

So, you could do this:

$("#ddStates").load("includes/getStates.php",
                      {choice2: $("#ddCountry").val(),
                       choice4: $("#ddCountryCodeGot").val()
                      }
                    );

Sometimes, you have to dig through the docs to see how jquery and jquery plug-ins work with passing data to a request like this, but I much prefer this approach.

Upvotes: 1

miyasudokoro
miyasudokoro

Reputation: 1745

You can put any number of variables (up to the server maximum number of characters) into the query, which is the part after the question mark. You separate them with ampersands.

Example, sending thing1 = x and thing2 = y:

page.php?thing1=x&thing2=y

Upvotes: 0

Related Questions