FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

AJAX $_POST

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


flatliner
hey every1, ok here's my probelm I got an ajax script that I didnt write and I have been using it with $_GET to pull information from a mysql database. But Now I want to pass $_POST information through it. I have been told all I had 2 do was change GET to POST in the script and it would work find. But when I echoed out $_POST[my_info] it was empty. So the information is not been passed. Any idea wats wrong? here is the script below

Code:
 function ewd_getcontent(url, containerid){
   var xmlhttp_obj = false;
   if (window.XMLHttpRequest) // if Mozilla, Safari etc
      xmlhttp_obj = new XMLHttpRequest();
   else if (window.ActiveXObject){ // if IE
      try {
      xmlhttp_obj = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e){
         try{
            xmlhttp_obj = new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (e){}
      }
   }
   else
   return false;
   document.getElementById(containerid).innerHTML="<img src='images/loading.gif' /> <b>Loading Data...</b>" ;
   xmlhttp_obj.onreadystatechange=function(){
      ewd_loadpage(xmlhttp_obj, containerid);
   }
   xmlhttp_obj.open('POST', url, true);
   xmlhttp_obj.send(null);
}

function ewd_loadpage(xmlhttp_obj, containerid){
   if ( xmlhttp_obj.readyState == 4 && xmlhttp_obj.status==200 )
      document.getElementById(containerid).innerHTML=xmlhttp_obj.responseText;
}
Star Wars Fanatic
Check the form that sends data to that script, make sure the form is sending it as POST, not GET.

Let me know if you got it, if not, I'll post an example of what it needs to look like.
flatliner
Yes it is send in POST alright and I have check to see if the var names are wrong. There is 6 var been passed so they all cant be wrong, but I did check them, its defo the script itself from what I can see.

Code:
<form  method="POST" action="javascript:ewd_getcontent('property.php', 'ajax_box');" name="seach" id="seach">
alem
Quote:
I have been told all I had 2 do was change GET to POST in the script and it would work find.

I think it is not true...

first of all with GET method you pass variables in the url. right? but with POST method you first clean the arguments in the url.(? and all part after that)
I mean first clear the url which is the first argument of the your function ewd_getcontent and then change your code as follows:
Quote:
Code:
 function ewd_getcontent(url, containerid){// CLEAR YOUR URL FROM ARGUMENTS!!! erase ? and all the things after ? in your url
   var xmlhttp_obj = false;
   if (window.XMLHttpRequest) // if Mozilla, Safari etc
      xmlhttp_obj = new XMLHttpRequest();
   else if (window.ActiveXObject){ // if IE
      try {
      xmlhttp_obj = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e){
         try{
            xmlhttp_obj = new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (e){}
      }
   }
   else
   return false;
   document.getElementById(containerid).innerHTML="<img src='images/loading.gif' /> <b>Loading Data...</b>" ;
   xmlhttp_obj.onreadystatechange=function(){
      ewd_loadpage(xmlhttp_obj, containerid);
   }
   xmlhttp_obj.open('POST', url, true);// it shoul be clear url without anything such ?key1=value1&key2=value2
   var params = "key1=value1&key2=value2";//instead of key value insert your own params
   
   http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   http.setRequestHeader("Content-length", params.length);
   http.setRequestHeader("Connection", "close");
   
   xmlhttp_obj.send(params);//instead of null, type params
}

function ewd_loadpage(xmlhttp_obj, containerid){
   if ( xmlhttp_obj.readyState == 4 && xmlhttp_obj.status==200 )
      document.getElementById(containerid).innerHTML=xmlhttp_obj.responseText;
}

i think it should work now...
Note:I take these codes from http://www.openjs.com/articles/ajax_xmlhttp_using_post.php. You can also visit and learn from that site...
flatliner
alem wrote:
Quote:
I have been told all I had 2 do was change GET to POST in the script and it would work find.

I think it is not true...

first of all with GET method you pass variables in the url. right? but with POST method you first clean the arguments in the url.(? and all part after that)
I mean first clear the url which is the first argument of the your function ewd_getcontent and then change your code as follows:
Quote:
Code:
 function ewd_getcontent(url, containerid){// CLEAR YOUR URL FROM ARGUMENTS!!! erase ? and all the things after ? in your url
   var xmlhttp_obj = false;
   if (window.XMLHttpRequest) // if Mozilla, Safari etc
      xmlhttp_obj = new XMLHttpRequest();
   else if (window.ActiveXObject){ // if IE
      try {
      xmlhttp_obj = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e){
         try{
            xmlhttp_obj = new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (e){}
      }
   }
   else
   return false;
   document.getElementById(containerid).innerHTML="<img src='images/loading.gif' /> <b>Loading Data...</b>" ;
   xmlhttp_obj.onreadystatechange=function(){
      ewd_loadpage(xmlhttp_obj, containerid);
   }
   xmlhttp_obj.open('POST', url, true);// it shoul be clear url without anything such ?key1=value1&key2=value2
   var params = "key1=value1&key2=value2";//instead of key value insert your own params
   
   http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   http.setRequestHeader("Content-length", params.length);
   http.setRequestHeader("Connection", "close");
   
   xmlhttp_obj.send(params);//instead of null, type params
}

function ewd_loadpage(xmlhttp_obj, containerid){
   if ( xmlhttp_obj.readyState == 4 && xmlhttp_obj.status==200 )
      document.getElementById(containerid).innerHTML=xmlhttp_obj.responseText;
}

i think it should work now...
Note:I take these codes from http://www.openjs.com/articles/ajax_xmlhttp_using_post.php. You can also visit and learn from that site...


ah yes you are right in saying that but I sorta left somthing out as I was describing my problem sorry. I have to send about 5 different arguments to a script and then the data is to be send back. The arguments most be passed by $_POST
flatliner
Any1 got anymore idea's ?
Stubru Freak
Basically, to POST data, you have to do this:

Code:
xmlhttp_obj.open('POST', URL, true);
xmlhttp_obj.send(POSTDATA);


The URL is just the URL without the part after the ?
The POSTDATA has to be a string formatted like this:
name=value&name=value&name=value
alem
sorry i didn't understand whaat you mean...
Quote:
I have to send about 5 different arguments to a script

yes , you can send with the code i posted. Look at the line:
Quote:
var params = "key1=value1&key2=value2";//instead of key value insert your own params

you can send as many arguments as you like as
Quote:
Code:
var params = arg1=value1&arg2=value2&arg3=value3&arg4=value4&arg5=value5;

(I don't know your arguments name and values, so i wrote as arg1,value1,arg2,valu2,...)

and you've said:
Quote:
and then the data is to be send back.

OK, it is sent. you can do anything you want with "xmlhttp_obj.responseText", in fact in that code you do change containerid's innerHTML:
Quote:
Code:
document.getElementById(containerid).innerHTML=xmlhttp_obj.responseText;

you can also do so many different things with "xmlhttp_obj.responseText".(you can even use "xmlhttp_obj.responseXML" if the response is in the xml format.)

by the way if you use mootools, there should be a sortcut for all these codes.
flatliner
Ok I understand everything you said there but the only problem I have is

Code:
 key1=value1&key2=value2...etc


last say my key's are

Code:
color=value1&size=value2


The user will be selecting from a drop down menu lets say and they click red for color and 4 for sizes and click submit on the php form, how do I put color=red&size=4?

like I just dont get it, like you cant use $_POST[color] coz its a .js page.
Like my values are not set they can change?
Stubru Freak
flatliner wrote:
Ok I understand everything you said there but the only problem I have is

Code:
 key1=value1&key2=value2...etc


last say my key's are

Code:
color=value1&size=value2


The user will be selecting from a drop down menu lets say and they click red for color and 4 for sizes and click submit on the php form, how do I put color=red&size=4?

like I just dont get it, like you cant use $_POST[color] coz its a .js page.
Like my values are not set they can change?


You have to get them yourself. The easiest way would be to give your form inputs an id tag, like 'color' and 'sizes'.
Then do:
Code:
'color=' + document.getElementById('color').value + '&sizes=' + document.getElementById('sizes').value
flatliner
Stubru Freak wrote:

You have to get them yourself. The easiest way would be to give your form inputs an id tag, like 'color' and 'sizes'.
Then do:
Code:
'color=' + document.getElementById('color').value + '&sizes=' + document.getElementById('sizes').value


OH right.....so its not $_POST at all then, ah right I dont know why I didnt cope that lol. ah get ya now, thanks I will do that so. Very Happy
flatliner
ok, I have tired what you said only thing is I am still having abit of a problem. Here is my html form below...

Code:
 
<form  method="" action="javascript: ewd_getcontent('property.php', 'ajax_box');" name="seach" id="seach">

<select class="font" id="max_price" size="8">
<option value="">-- Max Price --</option>
<option value="50,000">50,000</option>
<option value="100,000">100,000</option>
<option value="200,000">200,000</option>
<option value="300,000">300,000</option>
<option value="400,000">400,000</option>
<option value="500,000">500,000</option>
<option value="600,000">600,000</option>
<option value="700,000">700,000</option>
<option value="800,000">800,000</option></select>
 
<input type="submit" value="Seach Property !!"></form>
</div>


Ajax
Code:

 function ewd_getcontent(url, containerid){
   var xmlhttp_obj = false;
   if (window.XMLHttpRequest) // if Mozilla, Safari etc
      xmlhttp_obj = new XMLHttpRequest();
   else if (window.ActiveXObject){ // if IE
      try {
      xmlhttp_obj = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e){
         try{
            xmlhttp_obj = new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (e){}
      }
   }
   else
   return false;
   document.getElementById(containerid).innerHTML="<img src='images/loading.gif' /> <b>Loading Data...</b>" ;
   xmlhttp_obj.onreadystatechange=function(){
      ewd_loadpage(xmlhttp_obj, containerid);
   }
   xmlhttp_obj.open('POST', url, true);
   xmlhttp_obj.send('max_price=' + document.getElementById('max_price'));
}

function ewd_loadpage(xmlhttp_obj, containerid){
   if ( xmlhttp_obj.readyState == 4 && xmlhttp_obj.status==200 )
      document.getElementById(containerid).innerHTML=xmlhttp_obj.responseText;
}


PHP
Code:
$price_max       =  $_GET[max_price];


well I am using firebug and it tells me that "max_price=[object HTMLSelectElement]" is been sent to the php script, now am I right in saying I can use $_GET to pick that up? or whats wrong with my code?

Kind Regards
Ciaran Mc Cann
Stubru Freak
flatliner wrote:
ok, I have tired what you said only thing is I am still having abit of a problem. Here is my html form below...

Code:
 
<form  method="" action="javascript: ewd_getcontent('property.php', 'ajax_box');" name="seach" id="seach">

<select class="font" id="max_price" size="8">
<option value="">-- Max Price --</option>
<option value="50,000">50,000</option>
<option value="100,000">100,000</option>
<option value="200,000">200,000</option>
<option value="300,000">300,000</option>
<option value="400,000">400,000</option>
<option value="500,000">500,000</option>
<option value="600,000">600,000</option>
<option value="700,000">700,000</option>
<option value="800,000">800,000</option></select>
 
<input type="submit" value="Seach Property !!"></form>
</div>


Ajax
Code:

 function ewd_getcontent(url, containerid){
   var xmlhttp_obj = false;
   if (window.XMLHttpRequest) // if Mozilla, Safari etc
      xmlhttp_obj = new XMLHttpRequest();
   else if (window.ActiveXObject){ // if IE
      try {
      xmlhttp_obj = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e){
         try{
            xmlhttp_obj = new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (e){}
      }
   }
   else
   return false;
   document.getElementById(containerid).innerHTML="<img src='images/loading.gif' /> <b>Loading Data...</b>" ;
   xmlhttp_obj.onreadystatechange=function(){
      ewd_loadpage(xmlhttp_obj, containerid);
   }
   xmlhttp_obj.open('POST', url, true);
   xmlhttp_obj.send('max_price=' + document.getElementById('max_price'));
}

function ewd_loadpage(xmlhttp_obj, containerid){
   if ( xmlhttp_obj.readyState == 4 && xmlhttp_obj.status==200 )
      document.getElementById(containerid).innerHTML=xmlhttp_obj.responseText;
}


PHP
Code:
$price_max       =  $_GET[max_price];


well I am using firebug and it tells me that "max_price=[object HTMLSelectElement]" is been sent to the php script, now am I right in saying I can use $_GET to pick that up? or whats wrong with my code?

Kind Regards
Ciaran Mc Cann


Two problems in your code:
You can't send the element itself, HTTP doesn't support that kind of thing. You should send the value, get it by doing this:
Code:
document.getElementById('max_price').options[document.getElementById('max_price').selectedIndex].value

instead of just
Code:
document.getElementById('max_price')


Also, as you're posting the value, you should get it with
Code:
$price_max       =  $_POST[max_price];

instead of $_GET
flatliner
ah right yes, it works fine now, thanks very much for your help
flatliner
oh my god, I spoke to early, I anit picking it up now on the $_POST, I had a look in firebug and it is passing the variables fine, I have try pulling comma's after each POST variable but still nothing, any ideas?

Code:

max_price=100000  property_type=cottage   number_of_rooms=2   location=johnstownbridge


Code:


$property_type     = $_POST[property_type];
$price_max       = $_POST[max_price];
$location          = $_POST[location];
$number_of_rooms    = $_POST[number_of_rooms];

echo "$property_type";

etc....


also the script gives an erorr if I dont select a value for each string?
Stubru Freak
flatliner wrote:
oh my god, I spoke to early, I anit picking it up now on the $_POST, I had a look in firebug and it is passing the variables fine, I have try pulling comma's after each POST variable but still nothing, any ideas?

Code:

max_price=100000  property_type=cottage   number_of_rooms=2   location=johnstownbridge


Code:


$property_type     = $_POST[property_type];
$price_max       = $_POST[max_price];
$location          = $_POST[location];
$number_of_rooms    = $_POST[number_of_rooms];

echo "$property_type";

etc....


also the script gives an erorr if I dont select a value for each string?


Did you send this query string?
Code:

max_price=100000  property_type=cottage   number_of_rooms=2   location=johnstownbridge


It has to be like this:
Code:
max_price=100000&property_type=cottage&number_of_rooms=2&location=johnstownbridge


If that's not the problem, try placing the quotes around your array indices.
Code:

$property_type     = $_POST['property_type'];
$price_max       = $_POST['max_price'];
$location          = $_POST['location'];
$number_of_rooms    = $_POST['number_of_rooms'];


Let me know if it still doesn't work.

Also, I don't understand the last sentence. What script gives an error, the PHP or the javascript, and what error?
flatliner
hi, thats for your reply. Well unfortantly it still hasnt next my problem, I did all you said above and it still the same. The error msg you get in IE says its on line 26, although I cant find anything wrong there. Also the error given from firebug is
Code:
Index or size is negative or greater than the allowed amount" code: "1

this error come up in the javascript and happen when you do not select a value from each drop down box.

here is what firebug say is been passed
Code:
max_price=100000&property_type=cottage&number_of_rooms=2&location=johnstownbridge


here is my current php code
Code:

$property_type     = $_POST['property_type'];
$price_max       = $_POST['max_price'];
$location          = $_POST['location'];
$number_of_rooms    = $_POST['number_of_rooms'];

echo "

$property_type   
$price_max     
$location       
$number_of_rooms   ";



here is my currently ajax script
Code:
 
 function ewd_getcontent(url, containerid){
   var xmlhttp_obj = false;
   if (window.XMLHttpRequest) // if Mozilla, Safari etc
      xmlhttp_obj = new XMLHttpRequest();
   else if (window.ActiveXObject){ // if IE
      try {
      xmlhttp_obj = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e){
         try{
            xmlhttp_obj = new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (e){}
      }
   }
   else
   return false;
   document.getElementById(containerid).innerHTML="<img src='images/loading.gif' /> <b>Loading Data...</b>" ;
   xmlhttp_obj.onreadystatechange=function(){
      ewd_loadpage(xmlhttp_obj, containerid);
   }
   xmlhttp_obj.open('POST', url, true);
   xmlhttp_obj.send('max_price=' + document.getElementById('max_price').options[document.getElementById('max_price').selectedIndex].value +'&'+
   'property_type=' + document.getElementById('property_type').options[document.getElementById('property_type').selectedIndex].value +'&'+
   'number_of_rooms=' + document.getElementById('number_of_rooms').options[document.getElementById('number_of_rooms').selectedIndex].value +'&'+
   'location=' + document.getElementById('location').options[document.getElementById('location').selectedIndex].value
    );
}

function ewd_loadpage(xmlhttp_obj, containerid){
   if ( xmlhttp_obj.readyState == 4 && xmlhttp_obj.status==200 )
      document.getElementById(containerid).innerHTML=xmlhttp_obj.responseText;
}


Thanks very much for your help Very Happy
Stubru Freak
flatliner wrote:
hi, thats for your reply. Well unfortantly it still hasnt next my problem, I did all you said above and it still the same. The error msg you get in IE says its on line 26, although I cant find anything wrong there. Also the error given from firebug is
Code:
Index or size is negative or greater than the allowed amount" code: "1

this error come up in the javascript and happen when you do not select a value from each drop down box.

here is what firebug say is been passed
Code:
max_price=100000&property_type=cottage&number_of_rooms=2&location=johnstownbridge


here is my current php code
Code:
...



here is my currently ajax script
Code:
 ...


Thanks very much for your help Very Happy


Sorry, I forgot to mention you have to add this line between xmlhttp_obj.open and xmlhttp_obj.send:
Code:
xmlhttp_obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');


About the other problem, that's because javascript doesn't know what default value to use when you didn't select something. Just check if something is selected first.
flatliner
Ok well I did as you said but still nothing. Still not picking them up. although firebug is now showing me them passed in this format since I added in
Code:
xmlhttp_obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');


It now show them like this..
Quote:

location johnstownbridge
max_price 100000
number_of_rooms 2
property_type cottage


but I still am not picking them up?
alem
try adding content-length and connection headers...you can copy the code below:
Quote:
var params = 'max_price=' + document.getElementById('max_price').options[document.getElementById('max_price').selectedIndex].value +'&'+
'property_type=' + document.getElementById('property_type').options[document.getElementById('property_type').selectedIndex].value +'&'+
'number_of_rooms=' + document.getElementById('number_of_rooms').options[document.getElementById('number_of_rooms').selectedIndex].value +'&'+
'location=' + document.getElementById('location').options[document.getElementById('location').selectedIndex].value;

xmlhttp_obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp_obj.setRequestHeader("Content-length", params.length);
xmlhttp_obj.setRequestHeader("Connection", "close");

xmlhttp_obj.send(params);
flatliner
Nope, still doesnt work with that, makes no difference at all.
Thanks alway
Stubru Freak
flatliner wrote:
Nope, still doesnt work with that, makes no difference at all.
Thanks alway


Put this code in your PHP file, and see what the output is. If you can't find it yourself show me the output:
Code:
print_r($_POST);
flatliner
Ah ha, fianlly got it. it was a small problem with me while part of the code. It actually was passing the values, thanks very much for your help. Your a life saver.

Kind regards
Ciaran Mc Cann
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.