Question

This is a tough one.. I am attempting to use ajax for the first time. basically upon selecting an option from the first field, js and xml run a php script which creates the next dropdown based of of information it pulls from an SQL table. Surprisingly everything works pretty well, for my first attempt. the problem comes when you run the final query the variable that should be posted over ($_POST['ports'];) evaluates to a single white space character, not the value selected in the tag. time for the code:

html:

<h1>Enter port data to set how your table will look</h1>
<select style="width:150px;" onChange="showUser(this.value)">

<option value="">Select A Table Type</option>
<option value="option1">option1</option>
<option value="247">Custom</option>
</select>
<br>
<div id="select2">
</div>

javascript:

function showUser(str){
document.getElementById('hide').style.display='none';
document.getElementById('select2').innerHTML="";
if(str===""){
    document.getElementById('hide').style.display='none';
    document.getElementById('select2').innerHTML="";
    return;
}

if(str==="247"){
    document.getElementById('hide').style.display='block';
    return;
}

// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
}

// code for IE6, IE5
else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

//set up return
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("select2").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethtml.php?q="+str,true);
xmlhttp.send();
}

gethtml.php

//include connection
include 'log.php';

//get vars
$q=$_GET['q'];

//make the query
$sql = "SELECT DISTINCT Model 
FROM tbl
WHERE Manufacturer = '".$q."'";

//make the new box
echo '<select name="ports" style="width:150px;">';
echo '<option>Select A Port Total</option>';
$i=1;
foreach($conn->query($sql) as $row) {
echo $row['Model'];
echo '<option value="'.$row['Model'].'">'.$row['Model'].'</option>';
$i++;
}
echo "</select>";

so, everything is sent to gethtml.php. the query runs correctly, the <select> box is there, however there seems to be an error with the <select> part of it, and i just cant figure out what that is. Here is a snippet from the submission php the runs after you submit the form that the <select> is messing up on.

echo "<pre>";print_r($_POST);echo"</pre>";

which outputs

Array
(
[ports] => 
)

I know you can’t tell, but when i highlight that bit, there is a whitespace character there, i even ran it through an isset() to see it i was right and there is a character there.

here is an image of the xml created html when viewed with firebug:

Anyone have any ideas? This is very frustrating.. obviously, the firebug image is showing it not looking the way it should… if you guys need any more information please just ask

If its worth noting, im using chrome.

Answer 1

you are not posting your ajax request.

xmlhttp.open("GET","gethtml.php?q="+str,true);

you are sending it via get. in php, try print_r($_GET) instead of $_POST and check if you see the right value.