Ajax (MySQL) return value to form text area

[freecrm]

This may be simple, it may not...

This is the process

1) Simple form

2) Dynamically generated (php) select menu with javascript onchange behaviour

3) onchange behaviour sends value currently in menu to a php page 2

4) page 2 creates mysql_result from query based on $GET value from main page 1

5) Main page 1 uses onreadystatechange to pull result from page 2 and display.


The current methodology uses the getElementById() to send result to a pre-specified div with that id.

What I want to do is to place that value into a form <textarea>

I can't place the whole <div id=" in a default value, so how can I achieve this?

Please understand that while my php skills are OK, my JS skills are not

Page 1 ajax code

var xmlhttp;
function GetInfo(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="page2.php";
url=url+"?link="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("ajax").innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}
</script>

Stripped down Page 1 html

<form id="form1" name="form1" method="post" action="">
  <label for="Example">Example</label>
    <select name="Example" id="Example" onchange="GetInfo(this.value)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    <label for="FillIn">Text Area</label>
    <textarea name="FillIn" id="FillIn" cols="45" rows="5"></textarea>
</form>
 
<div id="ajax">Default Primary Deck Spec will appear here.</div>

Any ideas?

[descalzo]

If all you are asking is how to put the return text into the text area:

function stateChanged()
{
if (xmlhttp.readyState==4)
{


document.getElementById("FillIn").value=xmlhttp.responseText;
}
}

[freecrm]

Duh - that WAS simple - thanks

To complicate matters slightly, I now need to append several fields called by the onchange event.

I thought this was going to be simple purely by adding another action to the onchange command

i.e.

onchange="GetInfo(this.value); GetDetail(this.value);"

I would then copy/paste the JS, altering the command name to GetDetail and changing the output location

document.getElementById("formfield2").innerHTML=xm lhttp.responseText;

This additional JS would then call a different php page obtaining separate data.


....but this doesn't work!

[as4s1n]

Can you post your code? Maybe a typo?

@Descalzo: BTW, the way I learned it was

   request.onreadystatechange = function() {
     if (request.readyState == 4) {
        if (request.status == 200) {

Is the "if(request.status==200)" unnecessary?

[descalzo]

@Descalzo: BTW, the way I learned it was

   request.onreadystatechange = function() {
     if (request.readyState == 4) {
        if (request.status == 200) {

Is the "if(request.status==200)" unnecessary?

Depends how you handle 404 (file not found) or 500 (Server Error) type responses. If you are expecting simple text or javascript and try to parse an error page, you get garbage. If you just display the response, it can be ugly, but help in debugging. In the final product, yes you should test the response status and handle each appropriately (even if it is to ignore those other than 200)

I have a habit of just fixing the problem that someone posts rather than rewriting everything to "production standards".

[freecrm]

Can you post your code? Maybe a typo?

OK here goes..

JS..

<script type="text/javascript">
		var xmlhttp;
		
		function GetBasicInfo(str)
		{
		xmlhttp=GetXmlHttpObject();
		if (xmlhttp==null)
		  {
		  alert ("Browser does not support HTTP Request");
		  return;
		  }
		var url="/spec/ajax/ajax_basic_info.php";
		url=url+"?link="+str;
		url=url+"&sid="+Math.random();
		xmlhttp.onreadystatechange=stateChanged;
		xmlhttp.open("GET",url,true);
		xmlhttp.send(null);
		}
		
		function stateChanged()
		{
		if (xmlhttp.readyState==4)
		{
		document.getElementById("BasicInfo").innerHTML=xmlhttp.responseText;
		}
		}
		
		function GetXmlHttpObject()
		{
		if (window.XMLHttpRequest)
		  {
		  // code for IE7+, Firefox, Chrome, Opera, Safari
		  return new XMLHttpRequest();
		  }
		if (window.ActiveXObject)
		  {
		  // code for IE6, IE5
		  return new ActiveXObject("Microsoft.XMLHTTP");
		  }
		return null;
		}
    </script>
<script type="text/javascript">
		var xmlhttp;
		
		function GetDetailedInfo(str)
		{
		xmlhttp=GetXmlHttpObject();
		if (xmlhttp==null)
		  {
		  alert ("Browser does not support HTTP Request");
		  return;
		  }
		var url="/spec/ajax/ajax_detailed_info.php";
		url=url+"?link="+str;
		url=url+"&sid="+Math.random();
		xmlhttp.onreadystatechange=stateChanged;
		xmlhttp.open("GET",url,true);
		xmlhttp.send(null);
		}
		
		function stateChanged()
		{
		if (xmlhttp.readyState==4)
		{
		document.getElementById("DetailedInfo").innerHTML=xmlhttp.responseText;
		}
		}
		
		function GetXmlHttpObject()
		{
		if (window.XMLHttpRequest)
		  {
		  // code for IE7+, Firefox, Chrome, Opera, Safari
		  return new XMLHttpRequest();
		  }
		if (window.ActiveXObject)
		  {
		  // code for IE6, IE5
		  return new ActiveXObject("Microsoft.XMLHTTP");
		  }
		return null;
		}
    </script>

html form and div's

<select name="type" id="type" style="" onchange="GetBasicInfo(this.value); GetDetailedInfo(this.value)" >


...blah de blah..

<div id="BasicInfo">Basic Info goes here</div>

<div id="DetailedInfo">Detailed Info Ggoes here</div>

php (one page example for ajax_basic_info.php)

require_once('../../Connections/dbcrmauto.php');
mysql_select_db("DBCRM1") or die('Could not select DB: ' . mysql_error());

$ajaxlink=$_GET["link"];


$ajaxsql="SELECT * FROM Info WHERE basic_info = '".$ajaxlink."'";

$ajaxresult = mysql_query($ajaxsql);

while($ajaxrow = mysql_fetch_array($ajaxresult))
  {
  echo $ajaxrow['basic_info'];
  }
;

mysql_free_result($ajaxresult); 

Any ideas?

[descalzo]

1. In what way doesn't it work?

2. One problem I see immediately is that you are clobbering the first request with the second.
GetBasicInfo called, sets xmlhttp and returns before xmlhttp returns
GetDetailedInfo called, resets xmlhttp, losing the first call.
Try using different names for the two request objects.

[freecrm]

1. In what way doesn't it work?

On statechange, neither script appears to function, having no effect on either id basic info or detailed info.

2. One problem I see immediately is that you are clobbering the first request with the second.
GetBasicInfo called, sets xmlhttp and returns before xmlhttp returns
GetDetailedInfo called, resets xmlhttp, losing the first call.
Try using different names for the two request objects.

OK... that sort of makes sense.. bearing in mind I read JS like its in martian!

I tried renaming the "xmlhttp" variable to "xmlhttp1" and "xmlhttp2" for each case, but this had no effect either.

Maybe I'm looking at this the wrong way..

All I need to do is auto-fill a number of empty fields with data that comes back from a single Table, based on the state chage of 1 drop-down menu.

For instance, if the user chooses option 2 from the menu, form fields 3,5,7 and 9 will auto fill from the table "eg contents" contents.3, contents.5, contents.7, contents.9 etc.

Beofre I tried this method, an array seemed more likely, but I can't figure the JS to capture this and, more importantly, place it in in the right places.

[descalzo]

Make one request.
Have the php return a string with the results for the columns separated by a delimiter, ie a comma or colon
array_of_results = result.split( ':' ) ; will split the result into an array so you can put each value where you want.
XML would be another, more complicated choice of return.
JSON would be a third.

[essellar]

I tried renaming the "xmlhttp" variable to "xmlhttp1" and "xmlhttp2" for each case, but this had no effect either.

The problem very likely lies in your GetXmlHttpRequestObject() function -- it is assigning all requests to a single XmlHTTPRequest instance, so you really aren't getting asynchronous behaviour. There is no reason (other than to reduce request traffic) to fold all of your page requests into one as suggested elsewhere. You should be able to make the request an array in the function and increment the index on each call, returning only that member of the array for each call to GetXmlHttpRequestObject().