document.getElementBy...innerHTML on AJAX output

**phub11** · Jun 2 '09, 03:40 AM

To explain my problem better, I should probably add some more code...

Code:

<html>
<head>
<script type="text/javascript" src="AjaxCode.js"></script>
</head>
<body>

<form>
Select a Screen:
	<select name="users" onchange="showCond(this.value)">
<option>Select...</option>
	<?php
	
	include 'dbcon.php';
	
	$conn = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR); 

	mysql_select_db($database, $conn);
	$query  = "SELECT * from xtalscreens group by SCREEN";
	$result = mysql_query($query);
	while($row = mysql_fetch_assoc($result))
	{ 
	echo '<option value="' . $row['SCREEN'] . '">' . $row['SCREEN'] . '</option>';
	}	
	
	?>
	</select>
</form>
      <form name="myform">
<table style="text-align: center; width: 400px;"
 id="ninetysixradio" border="2" cellpadding="2">
  <tbody>
    <tr>
      <td></td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>A</td>
<td><input type="radio" name="ninetysix" value="1" onClick="updateDrop(this)"></td>
<td><input type="radio" name="ninetysix" value="2" onClick="updateDrop(this)"></td>
<td><input type="radio" name="ninetysix" value="3" onClick="updateDrop(this)"></td>
    </tr>
  </tbody>
</table>
</form>
<br>
<div id="txtCond">
<form name="dropdown2">
Condition:
<select id="secondDrop" onChange="updateRadio(this)">
<option></option>
</select>
</form>
</div>
<div id="txtResult">
</div>
</body>
</html>

...and...

Code:

var xmlhttp;

function showCond(screen)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="seconddrop.php";
url=url+"?q="+screen;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function showResult(cond,screen)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="result.php";
url=url+"?q="+screen+'-'+cond;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged1;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtCond").innerHTML=xmlhttp.responseText;
}
}

function stateChanged1()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtResult").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;
}

function updateDrop(sel)
{
alert(document.getElementById('secondDrop').innerHTML);
//document.myform.ninetysix[sel.value].checked==true;
document.getElementById('secondDrop').innerHTML='<option>'+sel.value+'</option>';
}

function updateRadio(sel)
{
var table = document.getElementById("ninetysixradio");
var radiobuttons = table.getElementsByTagName("input");
radiobuttons[sel.value-1].checked = true;
}

...and perhaps include this (secondDrop.php )...

Code:

<?php
$q=$_GET["q"];
print "Condition:";
	
	include 'dbcon.php';
	
	$conn = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR); 

	mysql_select_db($database, $conn);
	$query  = "SELECT * from xtalscreens WHERE SCREEN = '".$q."'";
	$result = mysql_query($query);
echo '<select onchange="showResult(this.value, \''.$q.'\')">';
while($row = mysql_fetch_array($result))
  {
echo '<option value="' . $row['COND'] . '">' . $row['COND'] . '</option>';
  }
echo "</select>";

mysql_close($conn);
?>

**RamananKalirajan** · Jun 2 '09, 06:59 AM

Hi, from the context i came to know that you are triggering an Ajax call on the change of a select box. In the response of the ajax u are updating the page with array of input radio & a second select box, on click of the radio, the second box value should be updated. Is this ur requirement.

On your code: did you checked wether you are getting the object for document.getEle mentById('secon dDrop')

Instead of using innerHTML fro select box,

Code:

document.getElementById('secondDrop').innerHTML='<option>'+sel.value+'</option>';

try using DOM

Code:

var selObj = sel.value;
document.getElementById(''secondDrop'').add(new Option(selObj,selObj));

Try it out and post it if u struck with some other thing.

Regards
Ramanan Kalirajan

**phub11** · Jun 2 '09, 02:05 PM

Thanks for the reply!

However, it still doesn't appear to work (even when I changed ''secondDrop'' to 'secondDrop'). Thanks in advance for any further help.

**acoder** · Jun 3 '09, 09:47 AM

If you want to just change the selected value, try this:

Code:

var second = document.getElementById("secondDrop");
second.options[second.selectedIndex].text = sel.value;

document.getElementBy...innerHTML on AJAX output

document.getElementBy...innerHTML on AJAX output

Comment

Comment

Comment

Comment