So I am trying to put the GET of the ajax request in the <select> using an id but it doesn't work. However when I use for example <p> with an id or <option> or anything else it does work and output what I want.
This is my Ajax script
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("brand").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("brand").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","inc/parts_form2.php?q="+str,true);
xmlhttp.send();
}
This is a part of the form
Year:
<select onchange="showUser(this.value)">
%year%
Brand:
<select id="brand">
</select>
And this is my php
<?php
$q = $_GET['q'];
echo $q;
?>
I am trying to get the output in <select id="brand"></select>. Which I check in the source code if it worked.
You need to put the content in option tags inside the select tag.
"<option>"+xmlhttp.responseText+"</option">;
or in php :
$d = "<option>".$_GET['q']."</option">;
Isnt the response text passed into the onreadystatechange callback?
xmlhttp.onreadystatechange = function (response){
// insert your method body here
}
Related
(Re Post) i had going through this tutarial : PHP ajax database : how to pass two variables and get data of them in different div even one? ,but it seems not working,and i need to have 3 select works together.i choose first select option then using ajax to pass data for getting second and using the
function showUser(strOther);
to get third data which is related to the first and second answer.all is running well but the third select which is:
<select id="txtHint1">
doesnt show me any answer.here is my scripts:
<script>
function showForum(str) {
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","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
<script>
function showUser(strOther) {
if(strOther==""){
document.getElementById("txtHint1").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("txtHint1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q1="+strOther,true);
xmlhttp.send();
}
</script>
this is the select options which i get the ajax data:
<!-- this forum will be
choosed to pass data to get second
select to filled up-->
<form>
<!-- first select-->
<select name="users" onchange="showForum(this.value)">
<option value="">All Orgs</option>
<option value="1">WebStatsProject</option>
<option value="2">mmu</option>
</select>
</form>
this select option will be filled by the first ajax request:
All Forums
the third not show any data,the other two working properly:
<!-- third select-->
<select id="txtHint1">
<option value="All Users">All Users</option>
</select>
Because you not define strOther
try this
function showUser(str,strOther){
and pass strOther to this function
AMENDMENT:
Hi all, thanks for all your replies. I've been wrestling trying to shoe horn the code into my page but I've still had no luck. While fiddling around I can't see why something like the below code wouldn't work - I can't get this to work either mind you(!). If it's not possible I'm hoping someone can shoot the idea down to save me wasting time trying to do it:
<form name='Names' role='form' action='#' method='get' onchange='this.form.submit()'>
<select name="FirstName">
<option value="1">FirstName#1</option>
</select>
<select name="LastName">
<option value="1">LastName#1</option>
</select>
</form>
...could I then pick up these selections in $_GET['FirstName'] and $_GET['LastName'] and pass them into my mysqli_query() to generate the table?
To prevent any chance of my confusion spreading I first want to describe what I'm trying to do... I want a webpage that has a table with a group of dropdowns that I can filter on - similar to Excel filters. If you know of a better way of doing it than how I'm trying below - please do enlighten me!!
Now, to describe the best progress I've made so far:
I have the below script (copied straight over from W3schools:
<script>
function showUser(str) {
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","entry_table.php?q="+str,true);
xmlhttp.send();
}
</script>
The above script is called from the below dropdown which populated using a PHP while loop from an SQL query:
<form>
<select name="Name" onchange="showUser(this.value)">
<option value="1">User#1</option>
</select>
</form>
The $q value is then passed to a PHP page to display the table after generating the SQL query with a:
WHERE UserID="$q"
This works but I'm concerned it seems to be a long-winded way of doing it - especially if I'm try to and expand the queries to include 6-7 other dropdown filters.
Thanks in advance,
Ben
You could go for a callback function instead.
function getData(url, callback)
{
if (window.XMLHttpRequest)
{
//IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{ //IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
callback(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
And then make an ajax call like this:
getData("entry_table.php?q="+str, function(data)
{
document.getElementById("txtHint").innerHTML=data;
});
Outer function
function doStuff(value) {
getData("entry_table.php?q="+value, function(data)
{
document.getElementById("txtHint").innerHTML=data;
});
}
and then select would be
<select onchange="doStuff(this.value)">
i am learning ajax and doing some practice. I am facing a problem. Here is my code.
<input class="category" id="design" type="button" value="Design" onclick="loadXMLDoc(design)" />
Ajax:
function loadXMLDoc(name)
{
var xmlhttp;
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)
{
var array = xmlhttp.responseText;
alert(array);
}
}
xmlhttp.open("GET","server.php?cat="+name,true);
xmlhttp.send();
}
server.php:
if(isset($_GET['cat']))
{
$cat = $_GET['cat'];
echo $cat;
}
Now, when i click on the button, the alter gives me [object HTMLInputElement] when i am expecting to get "design". What is wrong in it?
What is wrong in it?
You have to pass a string to the function:
onclick="loadXMLDoc('design')"
Currently you are passing the variable design. Since you have an element with ID "design" this variable happens to refer to that element. Then when you are trying to send the element to the server it is converted to a string. The default string representation of an input DOM element in JavaScript is "[object HTMLInputElement]".
Try this :
onclick="loadXMLDoc(this.value)"
with an ajax post to php can i send multiple variables, and if so whats the syntax?
loadXMLDoc("scripts/product_transfer.php?group="+group+"subgroup="+subgroup+"user="+user+,function()
something like that??
here is the function code:
//--------------------------------------------------------------------------------------------------- -----------------------------------------------------------------------
//Function to handle ajax
function loadXMLDoc(url,cfunc)
{
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=cfunc;
xmlhttp.open("POST",url,true);
xmlhttp.send();
}
Yes you can but you have forgotten the &s between values. You can also send data with POST method as argument to send() method. Also don't forget to use encodeURIComponent() on string values:
xmlhttp.open( "POST", url, true );
xmlhttp.send( "group="+encodeURIComponent(group)+
"&subgroup="+encodeURIComponent(subgroup)+
"&user="+encodeURIComponent(user) );
You should add & or '&'; between different variables in query string like
scripts/product_transfer.php?group="+group+"&subgroup="+subgroup+"&user="+user
Try this!
loadXMLDoc("scripts/product_transfer.php?group="+group+"&subgroup="+subgroup+"&user="+user+, function() { //Code to run when data is sent back});
i have written code for this and its work well,
page-1.
<select name="qt_n1" id="qt_n1" style="width: 100px;" onchange="return q1mrks(this.value,<?php echo $gen1_marks; ?>)">
<option>No. of Que.</option>
<?php
for($i=1;$i<=25;$i++){?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php } ?>
</select>
page-2.js
function q1mrks(country,m)
{
// alert("hellow");
if (country.length==0)
{
//alert("hellow");
document.getElementById("q1mrks").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("q1mrks").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../location/cal_marks.php?q1mrks="+country+"&marks="+m,true);
//mygetrequest.open("GET", "basicform.php?name="+namevalue+"&age="+agevalue, true)
xmlhttp.send();
}
and simply i got the values on the third page
page-3.php
<?php
echo $Q1mrks = $_GET['q1mrks'];
echo $marks = $_GET['marks'];
?>
<div id="q1mrks"></div>
Thank You,
data="postvarname1="+varvalue+"postvarname2"+var
& so on.....
I'll get to the point, assume my PHP script returns an array with two values, how would I address them within javascript?
<script type="text/javascript">
function ValidateCard(cardno)
{
if (cardno.length==0)
{
document.getElementById("txtprice").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("txtprice").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","coding/validation/validatecard.php?cardno="+cardno,true);
xmlhttp.send();
}
</script>
As you can see whatever is returned is send to display within a div tag, how would I differentiate between data?
Thanks
You could use json to serialize it so that javascript can read it.
So, in php json_encode($arr);
http://www.php.net/manual/en/function.json-encode.php
Then in javascript.
you should be able to do something like jsarr[key] to get the values
<?php
$result = array('success'=>1, 'messgae'=>"the message you want to show");
echo json_encode($result);
?>
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
result = xmlhttp.responseText.evalJSON(true);
//you can use result as array to get the information you want to check
if (result['success']) {
document.getElementById("successs").innerHTML=result['message'];
}
}
}