Dear friends,
I need help on this problem please.
I have an AJAX function that calls data from mysql with a php file, then onChange event of a dropdown item, the function is executed. The called data to be loaded on other text box controls in the calling php page.
However, the script below works well with loading data to dropdown listbox but does not work with text boxes.
Pls find code below:
AJAX script:
<script>
function showDetails(str2)
{
if (str2=="")
{
document.getElementById("txtAddress").innerHTML="";
document.getElementById("txtpic").innerHTML="";
document.getElementById("txtphone").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("txtAddress").innerHTML=xmlhttp.responseText;
document.getElementById("txtpic").innerHTML=xmlhttp.responseText;
document.getElementById("txtphone").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getparish-details.php?parish="+str2,true);
xmlhttp.send();
}
</script>
HTML that has the controls
HTML Code:
<select name="parish" id="txtparish" size="1" onchange="showDetails(this.value)">
</select>
<b style="color:#990000"> Parish Address : *</b><br />
<input type="text" name="pic" id="txtAddress" class="passwordEntry" />
<b style="color:#990000"> Name of PIC : *</b>
<input type="text" name="pic" id="txtpic" class="passwordEntry" />
<br />
<br />
<b style="color:#990000">Contact Phone Numbers :</b> <br />
<input type="text" name="pic" id="txtphone" class="passwordEntry" />
PHP file getparish-details.php
PHP Code:
<?php session_start();
include_once ("../db/connString2.php");
if (!$con=mysql_connect($server,$server_user,$server_pass)) {
die('Could not connect: ' . mysql_error()); }
elseif(!mysql_select_db($db_name, $con)) {
die("Could not connect to the database: " . mysql_error()); }
else {
}
?>
<?php
$q=$_GET["parish"];
//$q="CTL Central Parish";
$parish = mysql_query("SELECT area, parish_name, pic_name, address, phone FROM parish WHERE parish_name='$q'");
while($row = mysql_fetch_array($parish))
{
//echo "This is the address of the Church<br />";
echo $row['address'];
echo $row['pic_name'];
echo $row['phone'];
//echo $row['address'];
//echo '<input name="txtaddress" type="text" size="75" Readonly value="'.$row['address'].'">';
}
mysql_close($con);
?>
Hi again, Easytime.
If you have an <input> tag, and you try to set the innerHTML property, like this:
document.getElementById("txtAddress").innerHTML= "myNewValue";
the result will be this:
<input type="text" name="pic" id="txtAddress" class="passwordEntry">myNewValue</input>
and the input will stay blank.
What you need to do is set the value property, like this:
document.getElementById("txtAddress").value = "myNewValue";
and then the result will be:
<input type="text" name="pic" id="txtAddress" class="passwordEntry" value="myNewValue">
which works.
I understand what you mean. But that is not my concept. My concept is: The input box is updated automatically. That is, when I make a selection from a dropdown box, the onChange event calls a function. The function reads data and updates the input box with the data using the elementID of the input box.
Pls more ideas.
Thanks.
I think there is a communication problem here… I understand exactly what you’re saying, and I’m trying to explain to you why your code isn’t working, using examples.
Take a look at the code that you posted earlier:
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtAddress").innerHTML=xmlhttp.responseText; // Here is the problem
document.getElementById("txtpic").innerHTML=xmlhttp.responseText; // and here
document.getElementById("txtphone").innerHTML=xmlhttp.responseText; // and here
}
}
Do you not see what I’m talking about? You’re setting document.getElementById("txtAddress").innerHTML but it will not give you the result you want, and I explained why in my previous post.
Take a look at the code below
<script>
function showDetails(str2)
{
if (str2=="")
{
document.getElementById("txtAddress").innerHTML="";
// document.getElementById("txtpic").innerHTML="";
// document.getElementById("txtphone").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("txtAddress").innerHTML=xmlhttp.responseText;
// document.getElementById("txtpic").innerHTML=xmlhttp.responseText;
// document.getElementById("txtphone").innerHTML=xmlhttp.responseText;
}
code below
<select name="parish" id="txtparish" size="1" onchange="showDetails(this.value)">
</select>
<b style="color:#990000"> Parish Address : *</b><br />
<select name="address" id="txtAddress" class="passwordEntry"></select>
Commenting out two lines,
and using select boxes in the html below, and adjusting the php code below,
<?php
$q=$_GET["parish"];
//$q="CTL Central Parish";
$parish = mysql_query("SELECT area, parish_name, pic_name, address, phone FROM parish WHERE parish_name='$q'");
while($row = mysql_fetch_array($parish))
{
//echo "This is the address of the Church<br />";
echo '<option value="'. $row['address']. '">'. $row['address']. '</option>';
}
mysql_close($con);
?>
works well with combo boxes. But it does not work with text boxes. Why?
Hi Easytime,
Maybe it would help if we could see what is being returned by your AJAX call.
Please log responseText to the console and let us know what you get.
E.g.
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
console.log(responseText);
// document.getElementById("txtAddress").innerHTML=xmlhttp.responseText;
// document.getElementById("txtpic").innerHTML=xmlhttp.responseText;
// document.getElementById("txtphone").innerHTML=xmlhttp.responseText;
}
Because if you have a <select> tag then setting the innerHTML property makes sense. Lets say you have the following HTML:
<select id="fruit" name="fruit"></select>
and in your JS, you do this:
document.getElementById("fruit").innerHTML = "<option value='oranges'>Oranges</option>";
You’ll end up with HTML that looks like this:
<select id="fruit" name="fruit">
<option value='oranges'>Oranges</option>
</select>
Setting innerHTML in an input tag doesn’t work because the tag works differently. Inputs don’t have opening and closing tags:
// This is wrong
<input type="text">My value</input>
// This is correct
<input type="text" value="My Value">
so, with your explanation, what can be done to parse data from a variable to an input box? What should I do to overcome this problem? You know that if I were to design a desktop app, this will work very well without any itches…but I dont want to design a desktop app for the application that I am designing. I need to make it a browser-based app… that’'s y am using php and mysql to develop it. Pls help, thanks.
Hi Easytime,
fretburner has answered your question several times now.
What part of his answer are you having trouble with?
This:
document.getElementById("txtAddress").value = "myNewValue";
Just use the value attribute, not innerHTML
N.B. Where I have written “myNewValue”, you will have to retrieve the appropriate value from xmlhttp.responseText.
If you need help doing this, please post what xmlhttp.responseText is returning, as per my previous post.
Oh! I now get what you are saying.
I have done that (pls see code below); but it has not changed anything… No response, no errors, no actions, nothing.
Pls see script code and php codes below.
Thanks
<script>
function showDetails(str2)
{
if (str2=="")
{
document.getElementById("txtAddress").value="";
document.getElementById("txtpic").value="";
document.getElementById("txtphone").value="";
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("txtAddress").value=xmlhttp.responseText;
document.getElementById("txtpic").value=xmlhttp.responseText;
document.getElementById("txtphone").value=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getparish-details.php?parish="+str2,true);
xmlhttp.send();
}
</script>
php form that calls the function
<b style="color:#990000"> Parish Address : *</b><br />
<input type="text" name="address" id="txtaddress" value="" class="passwordEntry" />
<b style="color:#990000"> Name of PIC : *</b>
<input type="text" name="pic" id="txtpic" value="" class="passwordEntry" />
<br />
<br />
<b style="color:#990000">Contact Phone Numbers :</b> <br />
<input type="text" name="phone" id="txtphone" value="" class="passwordEntry" />
getparish-details.php
<?php session_start();
include_once ("../db/connString2.php");
if (!$con=mysql_connect($server,$server_user,$server_pass)) {
die('Could not connect: ' . mysql_error()); }
elseif(!mysql_select_db($db_name, $con)) {
die("Could not connect to the database: " . mysql_error()); }
else {
}
?>
<?php
$q=$_GET["parish"];
//$q="CTL Central Parish";
$parish = mysql_query("SELECT area, parish_name, pic_name, address, phone FROM parish WHERE parish_name='$q'");
while($row = mysql_fetch_array($parish))
{
//echo "This is the address of the Church<br />";
echo '<input type="text" name="address" value="'. $row['address']. '" />';
echo '<input type="text" name="pic" value="'. $row['pic_name']. '" />';
echo '<input type="text" name="phone" value="'. $row['phone']. '" />';
}
mysql_close($con);
?>
I tried it again, here is the output:
<input type=“text” name=“address” value=“1-5, Admiral Road, Lekki Phase 1” />
It is the same output for all three input boxes.
In the other thread, I gave you one possible solution to this using JSON. You could also do it like this:
getparish-details.php
while($row = mysql_fetch_array($parish))
{
echo $row['address'] . '|' . $row['pic_name'] . '|' . $row['phone'];
}
(Note that I’ve only shown the code that needs to be changed)
This will output a string, with all three pieces of data separated by the pipe (|) character.
Then, in your JS, you would make this change:
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var values = xmlhttp.responseText.split('|');
document.getElementById("txtAddress").value = values[0];
document.getElementById("txtpic").value = values[1];
document.getElementById("txtphone").value = values[2];
}
This takes the string that is returned by the server, and splits it into an array. The correct values are then assigned to each input.
I have copied your code as is and pasted it in my code, it does not show any change.
Pls see the code below:
<script>
function showDetails(str2)
{
if (str2=="")
{
document.getElementById("txtaddress").value="";
document.getElementById("txtpic").value="";
document.getElementById("txtphone").value="";
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("txtaddress").value=xmlhttp.responseText;
document.getElementById("txtpic").value=xmlhttp.responseText;
document.getElementById("txtphone").value=xmlhttp.responseText;
}*/
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var values = xmlhttp.responseText.split('|');
document.getElementById("txtAddress").value = values[0];
document.getElementById("txtpic").value = values[1];
document.getElementById("txtphone").value = values[2];
}
}
xmlhttp.open("GET","getparish-details.php?parish="+str2,true);
xmlhttp.send();
}
</script>
getparish-details.php
<?php
$q=$_GET["parish"];
//$q="CTL Central Parish";
$parish = mysql_query("SELECT area, parish_name, pic_name, address, phone FROM parish WHERE parish_name='$q'");
while($row = mysql_fetch_array($parish))
{
echo $row['address'] . '|' . $row['pic_name'] . '|' . $row['phone'];
}
mysql_close($con);
?>
What else should I do please?
Finally, I tried something else like the code below and it worked; but the output was replicated to all the input boxes defined in the script.
<script>
function showDetails(str2)
{
if (str2=="")
{
document.getElementById("txtaddress").value="";
document.getElementById("txtpic").value="";
document.getElementById("txtphone").value="";
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("txtaddress").value=xmlhttp.responseText;
document.getElementById("txtpic").value=xmlhttp.responseText;
document.getElementById("txtphone").value=xmlhttp.responseText;
}
/* if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var values = xmlhttp.responseText.split('|');
document.getElementById("txtAddress").value = values[0];
document.getElementById("txtpic").value = values[1];
document.getElementById("txtphone").value = values[2];
}*/
}
xmlhttp.open("GET","getparish-details.php?parish="+str2,true);
xmlhttp.send();
}
</script>
<?php
$q=$_GET["parish"];
//$q="CTL Central Parish";
$parish = mysql_query("SELECT area, parish_name, pic_name, address, phone FROM parish WHERE parish_name='$q'");
//$parish_add = mysql_query("SELECT address FROM parish WHERE parish_name='$q'");
//$parish_pic = mysql_query("SELECT pic_name FROM parish WHERE parish_name='$q'");
//$parish_phn = mysql_query("SELECT phone FROM parish WHERE parish_name='$q'");
while($row = mysql_fetch_array($parish))
{
echo $row['address'];// . '|' . $row['pic_name'] . '|' . $row['phone'];
}
mysql_close($con);
?>
Pls can u help from this point? Thank you. Here is the output below:
on txtaddress input field:
‘1-5, Admiral Road, Lekki Phase 1|Deacon Obinna David Ugenyi|08033016673’
on txtpic input field:
‘1-5, Admiral Road, Lekki Phase 1|Deacon Obinna David Ugenyi|08033016673’
on txtphone input field:
‘1-5, Admiral Road, Lekki Phase 1|Deacon Obinna David Ugenyi|08033016673’
Are you using Internet Explorer, by any chance?
NOO! I use chrome, firefox new released versions.
OK, just checking 
The problem is a small typo.
You need to change back to the JS that I gave you, but make sure that the first ID is ‘txtaddress’ not ‘txtAddress’:
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var values = xmlhttp.responseText.split('|');
document.getElementById("txtaddress").value = values[0]; // Needs to be a lowercase 'a' to match your HTML
document.getElementById("txtpic").value = values[1];
document.getElementById("txtphone").value = values[2];
}
I’ve tested this in my browser, so I know it works.
That’s correct! It works. Thanks so much. But, there is a problem! Do I always have to split the values into an array before I can echo it? What if I have more than 5 input boxes to, is there no way I can create a counter to check for number of input boxes? Thank you.