How to pass select form value to Ajax

[Anishgiri]

I have found an auto suggest script that is working. I am trying to add some codes in order for html select form to pass its value to ajax.js then from there it will pass the value to script_page.php something like these,

$str2= strtolower($_GET['content2']);


so I can create at script_page.php a condition on what sql query to do.
But to no avail, it does not pass the value. I get warning of undefined index content2. Below is the 2 main files.

Ajax.js

subject_id = '';
function handleHttpResponse() {
if (http.readyState == 4) {
if (subject_id != '') {
document.getElementById(subject_id).innerHTML = http.responseText;
}
}
}
function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP Object

function getScriptPage(div_id,content_id)
{
subject_id = div_id;
content = document.getElementById(content_id).value;
http.open("GET", "script_page.php?content=" + escape(content), true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
if(content.length>0)
box('1');
else
box('0');

}




function highlight(action,id)
{
if(action)
document.getElementById('word'+id).bgColor = "#C2B8F5";
else
document.getElementById('word'+id).bgColor = "#F8F8F8";
}
function display(word)
{
document.getElementById('text_content').value = word;
document.getElementById('box').style.display = 'none';
document.getElementById('text_content').focus();
}
function box(act)
{
if(act=='0')
{
document.getElementById('box').style.display = 'none';

}
else
document.getElementById('box').style.display = 'block';
}



search_page.php

<?php
include('config.php');

$str = strtolower($_GET['content']);
if(strlen($str))
{

$sel = mysql_query("select * from table1 where fname like '".trim($str)."%'");
if(mysql_num_rows($sel))
{
echo " <table align =\"center\" border =\"0\" width=\"50%\">\n";
if(mysql_num_rows($sel))
{
echo "<script language=\"javascript\">box('1');</script>";
while($row = mysql_fetch_array($sel))
{
$fname = str_ireplace($str,"<b>".$str."</b>",($row['fname']));


echo "<tr id=\"word".$row['id']."\" onmouseover=\"highlight(1,'".$row['id']."');\" onmouseout=\"highlight(0,'".$row['id']."');\" onClick=\"display('".$row['fname']."' );\" >\n<td>".$fname."</td> \n</tr>\n";
}
}
echo "</table>";
}
}
else
{
echo "<script language=\"javascript\">box('0');</script>";
}
?>



index.php page have select form like this. I tried adding something, and I think I am not doing it right, cause it does not pass the value.

<Select NAME="search_field" onClick="getScriptPage2('select_content')" id="select_content" >
<Option VALUE="fname">First Name</option>
<Option VALUE="lname">Last Name</option>

</Select>


I added this to ajax.js, but it does not work.



function getScriptPage2(select_id)
{
subject_id = div_id;
content2 = document.getElementById(select_id).value;
http.open("GET", "script_page.php?content2=" + escape(content2), true);
http.onreadystatechange = handleHttpResponse;
http.send(null);

}




Hope somebody can help me with this, I am just starting out with ajax and javascript. Thanks.

[Rowsdower!]

Rather than trying to do the "get" request, have you tried simply using alert() to test the value of "content2"?

If so, does that alert contain the appropriate value? If the value is not correct, what does it show instead?

I can't tell from the code snippets you have posted but it looks like you are sending the variable "content2" with the javascript but only testing for the variable "content" in the PHP. If the javascript is producing the correct value for content2, then we need to look at the PHP instead as it is probably just a matter of having the wrong variable title.

Take a look into that and let me know what you find.

[Anishgiri]

This looks a little fishy to me. Are you trying to check if that variable has a value? (isset)?

I remove it, but I think it's not related on the problem.

Thanks for the reply.
I Included this before on search_page.php, $str = strtolower($_GET['content2']); but I get a notice of Undefined index: content2.

I even tried http.open("GET", "script_page.php?content2=" + escape('HELLO'), true); , on ajax.js to see if it will set content2 on script_page.php, but it does not, cause I still get the notice of undefined index: content2.

So I guess the below code did not work??

function getScriptPage2(select_id)
{
subject_id = div_id;
content2 = document.getElementById(select_id).value;
http.open("GET", "script_page.php?content2=" + escape(content2), true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}



Ajax.js passes value for input box (for search query).

function getScriptPage(div_id,content_id)
{
subject_id = div_id;
content = document.getElementById(content_id).value;
http.open("GET", "script_page.php?content=" + escape(content), true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
if(content.length>0)
box('1');
else
box('0');

}



I wonder why the value for input box is getting pass, but I can't pass another value with select form. From my understanding http.open("GET", "script_page.php?content=" + escape(content2), true); , can pass a value on php pages.

[Rowsdower!]

Have you tried using alert(content2) inside the getScriptPage2 function to test the value of "content2"?

[Anishgiri]

This is a noob question, I am not familiar with javascript, what is the proper code to test content2 with alert? I know what is alert, but I don't know how to code it to test content2.

[Rowsdower!]

Try something like this:
function getScriptPage2(select_id)
{
subject_id = div_id;
content2 = document.getElementById(select_id).value;
alert(content2);
http.open("GET", "script_page.php?content2=" + escape(content2), true);
http.onreadystatechange = handleHttpResponse;
http.send(null);

}

[Anishgiri]

Thanks for the response,I appreciate the help. But I finally achieve my desired result. I am not sure it seems with Ajax, once you click another form, the stored value of a variable will be lost?

Assuming the index content is being set by a click on another page.

$str = strtolower($_GET['content']);
$str2 = strtolower($_GET['content2']);

When you click another form that set the index for content2, the data stored on $str will be lost?

[Rowsdower!]

Thanks for the response,I appreciate the help. But I finally achieve my desired result. I am not sure it seems with Ajax, once you click another form, the stored value of a variable will be lost?

Assuming the index content is being set by a click on another page.

$str = strtolower($_GET['content']);
$str2 = strtolower($_GET['content2']);

When you click another form that set the index for content2, the data stored on $str will be lost?

Yes, an ajax page call only passes that particular set of data to the server and the server isn't storing old variable values. It's not being "reset" but actually hasn't been set at all in that page load because you haven't specified it in that page load.

If you want to keep data between ajax requests you will need to use the "session" feature of PHP to save $_GET['content'] into $_SESSION['content'] and to save $_GET['content2'] into $_SESSION['content2']. Then those variables will be available to you for as long as you like if you access them through the $_SESSION variable.

It would look something like this:
<?
session_start();

if(isset($_GET['content'])){
$_SESSION['content'] = $_GET['content'];
}
if(isset($_GET['content2'])){
$_SESSION['content2'] = $_GET['content2'];
}
if(isset($_SESSION['content']) && isset($_SESSION['content2'])){
print "Content: ".$_SESSION['content']."<br />\n";
print "Content 2: ".$_SESSION['content2']."<br />\n";
}
?>