Update form action value with PHP var using AJAX

[BlackAce]

Hi All--

 

Here's what I'm trying to accomplish. I copied this basic AJAX function from another blog for use on a search feature I was building on our site. It runs a PHP script, and then returns the text to a predefinied div on the original page. Here is the code:

 

<script type="text/javascript">
function showResult(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","search_mysql.php?q="+str,true);
xmlhttp.send();
}
</script>

<form method="POST" action="null">
<input type="text" size="30" onkeyup="showResult(this.value)" />
</form>
<div id="txtHint"></div>

 

In addition to creating the result text that is returned to the "txtHint" div, my PHP script also generates a var $topurl that I want to also return to the form, and replace "null" as the form action. I don't really know anything about AJAX, so I don't know how to modify the script to update the form action as well as print the result text in the div below.

 

Help?

[Zane]

Firstly, give your form a name attribute

 

</pre>
<form method="POST" action="null" name="'myform'">

<

 

Secondly, add this line below the line for txtHint

document.myform.action = 'whatever';

[BlackAce]

Thanks Zane, I've dropped that in as you instructed.

 

Still not sure how to read through my responseText, locate the var or value of the var ($topurl) and use that to replace 'whatever' as indicated in your example.

[Zane]

xmlhttp.responseText will contain whatever search_mysql.php?q="+str contains.. 

 

In other words, responseText is just that, text.  In order to parse out a specific variable, you'll need to manipulate what search_mysql.php outputs so you can parse through it.

 

For instance.  You could have it ouput

txtHint:topurl 

 

then use the split function to split on :

[BlackAce]

OK, so using split() here's where I am:

 

<script type="text/javascript">
function showResult(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)
    {
var myString = xmlhttp.responseText;
var mySplitResult = myString.split("mySPLIT");
    //document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
document.myform.action = mySplitResult[0];
document.getElementById("txtHint").innerHTML=mySplitResult[1];
}
  }
xmlhttp.open("GET","search_mysql.php?q="+str,true);
xmlhttp.send();
}
</script>

<form method="POST" action="null" name='myform'>
<input type="text" size="30" onkeyup="showResult(this.value)" />
</form>
<div id="txtHint"></div>

 

The form action updates perfectly now (yay!), however, the rest of the responseText is coming back as undefined when I try to call it with mySplitResult[1].

 

Any ideas?

[BlackAce]

When I do the following:

 

for(i = 0; i < mySplitResult.length; i++){
document.write("<br /> Element " + i + " = " + mySplitResult[i]); 
}

 

I get this:

 

Element 0 = specialty.php?view=SP&specialty=SurgeryOrthoPediatric

Element 1 = Surgery - Ortho: Pediatric

Surgery - Pediatric

Surgery - Pediatric: Cardiothoracic

Surgery - Pediatric Cardiovascular

Surgery - Pediatric: Neurosurgical

 

So it's obviously working and splitting into the two groups. So I'm not sure why "mySplitResult[1]" returns undefined, using the code in my post above.

 

EDIT: So here's a chunk of code from my PHP file that generates the responseText.

 

else {
$x=0;
$topurl='';
while($row = mysql_fetch_array($result)) {
	if($x == 0 && $row['specialty_shortname']!=NULL) {
		$topurl = "specialty.php?view=SP&specialty=".$row['specialty_shortname']."mySPLIT";
		$x++;
		echo $topurl;
	}
	elseif($x == 0 && $row['facility_ID']!=NULL) {
		$topurl = "detail.php?view=ST&facility_id=".$row['facility_ID']."mySPLIT";
		$x++;
		echo $topurl;
	} 
	if($row['specialty_shortname']!=NULL) {
		echo "<a href='specialty.php?view=SP&specialty=".$row['specialty_shortname']."'>".$row['specialty_displayname']."</a><br/>";				
	}
	if($row['facility_ID']!=NULL) {
		echo "<a href='detail.php?view=ST&facility_id=".$row['facility_ID']."'>".$row['facility_name']."</a><br/>";
	}		
}
}

 

If I remove the second "mySPLIT" from the elseif, mySplitResult[1] returns with the correct information instead of undefined. But the second "mySPLIT" shouldn't ever be printed if the first if statement comes back true.  :-\

[Zane]

What is the purpose of $x?  From your code I can only assume it is to capture the first loop because you aren't incrementing $x.