display multiple values using responseText

Question

dinhunzvi 0 Newbie Poster

11 Years Ago

i have a table with the following structure

CREATE TABLE IF NOT EXISTS `test_check` (
  `id` int(4) NOT NULL AUTO_INCREMENT,
  `name` varchar(65) NOT NULL DEFAULT '',
  `lastname` varchar(65) NOT NULL DEFAULT '',
  `email` varchar(65) NOT NULL DEFAULT '',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

i have a html page that has three text boxes, one for entering a search string and the other one for displaying the first name and surname of the returned row
the html page is as follows

<html>
<body>
<style>
#displayDiv{
background-color: #ffeeaa;
width: 200;
}
</style>
<script type="text/javascript">
function ajaxFunction(str)
{
var httpxml;
try
{
// Firefox, Opera 8.0+, Safari
httpxml=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
httpxml=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
httpxml=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}

function stateChanged()
{
if(httpxml.readyState==4)
{
document.getElementById("displayDiv1").value=httpxml.responseText;
document.getElementById("displayDiv2").value=httpxml.responseText;
}
}
var url="ajax-search-demock.php";
url=url+"?txt="+str;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateChanged;
httpxml.open("GET",url,true);
httpxml.send(null);
}
</script>
</head>
<body>
<form name="my">
Search: <input type="text"
onkeyup="ajaxFunction(this.value);" name="" />
<p>

Name: <input type="text" name="displayDiv" id="displayDiv1"><br>
Surname: <input type="text" name="displayDiv" id="displayDiv2">
<p>

<input name="" type="reset" value="Reset">

</form>

</body>
</html>

the php code for searching the table is as follows

<?php
//***************************************
// This is downloaded from www.plus2net.com //
/// You can distribute this code with the link to www.plus2net.com ///
// Please don't remove the link to www.plus2net.com ///
// This is for your learning only not for commercial use. ///////
//The author is not responsible for any type of loss or problem or damage on using this script.//
/// You can use it at your own risk. /////
//*****************************************
//error_reporting(E_ERROR | E_PARSE | E_CORE_ERROR);
////// Your Database Details here /////////
$dbservertype='mysql';
$servername='127.0.0.1';
$dbusername='root';
$dbpassword='';
$dbname='delete_checkbox';

////////////////////////////////////////
////// DONOT EDIT BELOW /////////
///////////////////////////////////////

connecttodb($servername,$dbname,$dbusername,$dbpassword);
function connecttodb($servername,$dbname,$dbuser,$dbpassword)
{
global $link;
$link=mysql_connect ("$servername","$dbuser","$dbpassword");
if(!$link){die("Could not connect to MySQL");}
mysql_select_db("$dbname",$link) or die ("could not open db".mysql_error());
}
///////////////////// Main Code sarts ////////


$in=$_GET['txt'];
$msg="";
if(strlen($in)>0 and strlen($in) <20 ){
$t=mysql_query("select * from test_check where name like '$in%' OR lastname like '$in%' LIMIT 1");
while($nt=mysql_fetch_array($t)){ error_reporting(0);
$msg.=$nt[name];




}
}
echo $msg;

?>

The search results should display both the first name and last name but it's only displaying the first name in both textboxes. I need to display name in first textbox and surname in second textbox. Where am i getting it wrong?

php

3 Contributors
10 Replies
1K Views
19 Hours Discussion Span
Latest Post 11 Years Ago Latest Post by broj1

broj1 356 Humble servant

11 Years Ago

You are returning only the name in a message not alsoo the lastname. Add lastname also and separate the name and lastname so you can distinguish them when returned from ajax cal, maybe with comma:

    ...
    while($nt=mysql_fetch_array($t)) { error_reporting(0);
        $msg.= $nt[name] . ',' . $nt[lastname];
    }
}
echo $msg;

On html page insert the name and lastname:

// split the returned string into array of name and lastname
nameAndLastnameArray = value=httpxml.responseText.split(',');

// insert name into appropriate box
document.getElementById("displayDiv1").value=nameAndLastnameArray[0];

// insert lastame into appropriate box
document.getElementById("displayDiv2").value=nameAndLastnameArray[1];

Edited 11 Years Ago by broj1

broj1 356 Humble servant

11 Years Ago

I guess because the nameAndLastnameArray[1] does not exist (is undefined) when removing. Can you describe what is the purpose of the page and the form.

IIM 163 Master Poster

11 Years Ago

A little modification in boj1 post.
As there may be a case when user has given only first name .

if(nameAndLastnameArray.length > 1) {
    // insert name into appropriate box
    document.getElementById("displayDiv1").value=nameAndLastnameArray[0];
    // insert lastame into appropriate box
    document.getElementById("displayDiv2").value=nameAndLastnameArray[1];
}  elseif(nameAndLastnameArray.length == 1) {
    // insert empty string into boxes
    document.getElementById("displayDiv1").value=nameAndLastnameArray[0];
    document.getElementById("displayDiv2").value='';
}
else {
    // insert empty string into boxes
    document.getElementById("displayDiv1").value='';
    document.getElementById("displayDiv2").value='';
}

broj1 commented: Good point +8

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

dinhunzvi 0 Newbie Poster · Answer 1 · 2013-02-21T06:34:27+00:00

Thanks. It's now displaying the correct data in the correct fields. But there's an issue with the surname field displaying 'undefined' when you start removing text from the search box. Only the name field is going blank when you do that, and i want both fields to go blank. Why is that?

broj1 356 Humble servant Featured Poster · Answer 2 · 2013-02-21T07:30:27+00:00

You could use lenght property to check for the second element:

if(nameAndLastnameArray.length > 1) {
    // insert name into appropriate box
    document.getElementById("displayDiv1").value=nameAndLastnameArray[0];
    // insert lastame into appropriate box
    document.getElementById("displayDiv2").value=nameAndLastnameArray[1];
} else {
    // insert empty string into boxes
    document.getElementById("displayDiv1").value='';
    document.getElementById("displayDiv2").value='';
}

But I do not know whether this is the way you want to do it.

dinhunzvi 0 Newbie Poster · Answer 3 · 2013-02-21T07:38:36+00:00

Well, i'm developing a web-based client underwriting system which will contain a lot of records. So at the moment i am trying to make it easier for the user to fill in forms so that they don't have to manually type in the fields, hence the reason for the search box which will automatically populate the other textboxes as the user types. So your help would be much appreciated.

dinhunzvi 0 Newbie Poster · Answer 4 · 2013-02-21T08:08:44+00:00

Wow. It's now working the way i want. Thanks a lot man. I wish i could shake your hand :)

broj1 356 Humble servant Featured Poster · Answer 5 · 2013-02-21T08:20:08+00:00

So at the moment i am trying to make it easier for the user to fill in forms so that they don't have to manually type in the fields

Now you have an input box where only one name/surname can be displayed. But in cases like yours I think the practice is to display a list of matches which gets shorter the more characters you type in. So the principle is:

on keyup event you shoot the ayax and read the matches for whatever is currently typed in an input box
ajax returns an unordered list (<ul></ul>) of matches into a designated div
you use CSS to position the list directly under the textbox and shape it appropriately
usually the ajax does not get fired on first letter but once you have say three letters or more

I hope I guessed right what is your intention, please correct me if I am wrong.

dinhunzvi 0 Newbie Poster · Answer 6 · 2013-02-21T08:26:57+00:00

Ok. U've just given me a great idea. So wat exactly would the code be like if i may ask?

broj1 356 Humble servant Featured Poster · Answer 7 · 2013-02-21T09:24:16+00:00

Have a look at this article:

http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/447144/autoseggestion-styling

You will find a concept there. It is a bunch of texts to read but it is good if you get an idea how it goes. Then try to code it and when you have troubles come back here. Maybe it would be a good idea to start a new thread since this one has been marked as solved. If you start a new thread please PM me, otherwise I might not notice it.

Also have a look at these links for jquery plugins that do this functionality:

http://www.devbridge.com/projects/autocomplete/jquery/
http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/447144/autoseggestion-styling