ajax, how to change two divs using one ajax request?

Question

how to change 2 divs using one ajax request ?

ajax-update.php

<?php
include("config.inc.php");
include("user.inc.php");
$id = $_GET['id'];
$item = New item($id);
$result = $item->iteminfo;
echo $result->name."<br />";
unset($item); 
?> 

html:

<tr>
<td> (one) </td>

<td><input type="text" value="" onchange="showUser<?php echo $x;?>(this.value)"  style="width:70px;"/></td>

<td><span id="txtHint<?php echo $x;?>"></span></td>

<td><input type="text" value="" name="price_<?php echo $x;?>" id="price_<?php echo $x;?>"  onchange="upperCase<?php echo $x+$h;?>()" style="width:40px;"/></td>

<td><input type="text"  id="proce_<?php echo $x;?>" style="width:70px;" value="<?php echo $x+$h;?>" disabled /></td>

<td><input type="text" value="" name="price_<?php echo $x;?>"   style="width:40px;"/></td>

<td><input type='text' id="totalPrice<?php echo $x;?>" disabled /></td>

</tr>

script:

function showUser<?php echo $x;?>(str)
{
if (str=="")
  {
  document.getElementById("txtHint<?php echo $x;?>").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<?php echo $x;?>").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax-update.php?id="+str,true);
xmlhttp.send();
}

my question is, when i change this value

<td><input type="text" value="" onchange="showUser<?php echo $x;?>(this.value)"  style="width:70px;"/></td>

not only this td

<td><span id="txtHint<?php echo $x;?>"></span></td>

but also this td

    <td><input type="text"  id="proce_<?php echo $x;?>" style="width:70px;" value="<?php echo $x+$h;?>" disabled /></td>

now i only can change one div (txtHint) on the fly,

sory for my english.

note : i want to put un update with diferent file, for example when value change, this script is word

xmlhttp.open("GET","ajax-update.php?id="+str,true);

and the other one is

foo.php

thanks

angga

EDIT 1:

[1] | [2] | [3]

• [1] : i input value manualy
• [2] : this span txtHint change using ajax
• [3] : i want this change too same as [2]

EDIT 2 :

document.getElementById("txtHint<?php echo $x;?>").innerHTML=xmlhttp.responseText;
document.getElementById("proce_<?php echo $x;?>").value=xmlhttp.responseText;

thats is work, but value in [2] and [3] is same, because it take from one file ajax-update.php how to add other file but still in one ajax request ?

Answer 1

If I understand your question correctly, you want to change the text for the first element (a SPAN) as well as the second (an INPUT).

The span you seem to have figured out -- you use innerHTML. You wrote:

document.getElementById("txtHint<?php echo $x;?>").innerHTML=xmlhttp.responseText;

Underneath that... you could add

document.getElementById("proce_<?php echo $x;?>").value=xmlhttp.responseText;

However -- you should also look into using jQuery for this kind of thing. It takes care of the cross-browser stuff for you, and makes this kind of coding MUCH simpler. You can do all the JSON/XML requests you want, and update individual components easily.