How do I pass PHP multiple variables to Javascript (AJAX)

@tescgoOct 19.2010

Hi Everyone.

I’ve recently begun using AJAX on my website and have ran into a problem. Hopefully not a massive one and with your help i’ll be on my way ?

My webpage: ~~[B]~~catalogue.php[/B] contains a category variable named $cid which the page GETS in order to display products from the correct category. This works fine.

I now want to implement a drop-down box to sort by price, name, newest etc…

I have tested the AJAX out with a dropdown box for changing the category and it works fine, this is because it is only passing one variable which it gets via the javascript “this.value”.

The sort by price box requires two variables to be passed and its here i’m pulling my hair out.

I can pass the “this.value” which tells the javascript function I want to sort by price/newest/etc but I cannot figure out how to pass the category variable ($cid) so that when the xmlhttp.open calls the url: getSort.php it passes both pieces of info.

If anyone can help I would be most grateful.

My javascript is:

[CODE]function showSort(str) { var cat = <?php echo $cid ?>; if (str==””) { document.getElementById(“txtHint”).innerHTML=””; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); } xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText; } }

xmlhttp.open(“GET”,”getSort.php?s=”+str,true); xmlhttp.send(); } [/CODE]

The webpage dropdown box:

[code=php] <$php $cid = $_GET[‘cid’]; ?> <select name=”sort” onchange=”showSort(this.value)”>

<option value=”pr-a”> Price (low-high) </option> <option value=”pr-d”> Price (high-low) </option> <option value=”nm”> Name (A-Z) </option>

</select>

<div id=”txtHint” style=”margin-top:-30px;”>[/code]

to post a comment

JavaScript

5 Comments(s) _↴

@KorOct 19.2010 — #same as for an ordinary submit[B] name1=val1[COLOR="Blue"]&[/COLOR]name2=val2[COLOR="Blue"]&[/COLOR]name3=val3[/B] ...

<i>
 </i>xmlhttp.open("GET","getSort.php?s="+str[COLOR="Blue"]+"&amp;cat="+cat[/COLOR],true);

In the php file (getSort.php in your case) you will receive the variable as:

<i>
 </i>$cat=&amp;$_GET['cat'];

@tescgoauthorOct 19.2010 — #Hi,

THanks for the quick reply, however i'm so new to javascript I am still confused ?

How do I pass the variable into the js function and where is it passed from? Does it go via the call in the Select html tag?

I've changed the js function to:

[CODE]function showSort(str,cat)
 {
 if (str=="")
 {
 document.getElementById("txtHint").innerHTML="";
 return;
 }
 if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
 else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
 { 
 
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
 document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
 }
 }
 
 xmlhttp.open("GET","getSort.php?s="+str+"&cat="+cat,true);
 xmlhttp.send(); 

 }       [/CODE]

@ca87Oct 19.2010 — #Hi Everyone.

I've recently begun using AJAX on my website and have ran into a problem. Hopefully not a massive one and with your help i'll be on my way ?

My webpage: [B]catalogue.php[/B] contains a category variable named $cid which the page GETS in order to display products from the correct category. This works fine.

I now want to implement a drop-down box to sort by price, name, newest etc...

I have tested the AJAX out with a dropdown box for changing the category and it works fine, this is because it is only passing one variable which it gets via the javascript "this.value".

The sort by price box requires two variables to be passed and its here i'm pulling my hair out.

I can pass the "this.value" which tells the javascript function I want to sort by price/newest/etc but I cannot figure out how to pass the category variable ($cid) so that when the xmlhttp.open calls the url: getSort.php it passes both pieces of info.

If anyone can help I would be most grateful.

My javascript is:

[CODE]function showSort(str)
 {
 var cat = <?php echo $cid ?>;
 if (str=="")
 {
 document.getElementById("txtHint").innerHTML="";
 return;
 }
 if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
 else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
 { 
 
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
 document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
 }
 }
 
 xmlhttp.open("GET","getSort.php?s="+str,true);
 xmlhttp.send(); 

 } [/CODE]

The webpage dropdown box:

[code=php]                     <$php  $cid = $_GET['cid'];   ?> 
 <select name="sort" onchange="showSort(this.value)">
 
   <option value="pr-a"> Price (low-high) </option>
   <option value="pr-d"> Price (high-low) </option>
   <option value="nm"> Name (A-Z) </option>
 
 
   </select>
 
 
 <div id="txtHint" style="margin-top:-30px;">[/code]

[/QUOTE]

As it stands, i would guess you will need ajax with multiple quary. i will normally do the httpRequest function seperate. To really understand you need i need a clear explanation of what you php script does. before i can really help.

[CODE]function loadScript(url,cfunc){
 xmlhttp=new XMLHttpRequest();
 xmlhttp.onreadystatechange=cfunc;
 xmlhttp.open("GET",url,true);
 xmlhttp.send();
 }[/CODE]

and then in do another function

[CODE]function populate(str){
 if (str==""){
 document.getElementById("whatever id").appendChild("");
 return;
 }
 loadScript("getSort.php?cid?anotherValue="+str,function(){
 if (xmlhttp.readyState==4 && xmlhttp.status==200){
 var d = document;
 var s = d.getElementById('id');
 var cids= eval('('+xmlhttp.responseText+')');
 for (key in cids) {
 var o = d.createElement('option');
 o.value = key;
 var text = d.createTextNode(pools[key]);
 o.appendChild(text);
 s.appendChild(o);
 }
 }
 });
 }[/CODE]

and on you html you might want to delete the options and let js do it for u.

Hope this gives u an idea

@KorOct 19.2010 — #
How do I pass the variable into the js function and where is it passed from?[/QUOTE]
How should I know? Haven't you already defined that variable (when the document was originally loaded) via a php echo?

<i>
 </i>function showSort(str)
 {
 [COLOR="Blue"]var cat = '&lt;?php echo $cid; ?&gt;';[/COLOR]

[/quote]
(by the way, you should end the php line with a semicolon)

This is what I have understood.

@tescgoauthorOct 19.2010 — #Hi,

I've got it working! Thanks for your help.

I was declaring the variable in the JS as being $cid. THe mistake I made was that the php variable should have been $_GET [cid]

Also in #JavaScript _↴

open cube menu working with two pages: 1 for input another for results need help modifying this

Success!

Help @tescgo spread the word by sharing this article on Twitter...

Tweet This

How do I pass PHP multiple variables to Javascript (AJAX)

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How do I pass PHP multiple variables to Javascript (AJAX)

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴