AJAX help require: Yahoo! Mail like insert address

**yasirhussain** · Jun 19, 2007 19:27

This is lengthy, please stay with me.

I am developing a solution for a forwarding company to manage their trucks' routes. Working mechanism is you enter forwarding agencies and customers and then plan tours for them by adding packets to tours. Each packet coming into the warehouse is mandatory information such as forwarding company, customer to be delivered to etc.

Now, the real question. It's hard to remember packet numbers to add them to tours as there will be dozens of trucks leaving everyday with hundreds of packets. If you see the actual working below, I would like to know a quick AJAX solution that I can use for adding packets to the tours. I was thinking of a solution that in the item/package field at the tour, if you start entering forwarding agency's name, it lists all packets currently available by that forwarding agency and you can choose one. Something very close to composing message in Yahoo! Mail; when you start typing name of someone from address book, it lists all the relevant contacts matching the criteria quickly. I'll need to pass on the forwarding agency name to search in MySQL DB for relevant packets.

I will be thankful if someone can direct me to a solution or can provide one as I'm new to AJAX and will be trying it out first time. Something that can interact with MySQL DB.

If you want to see it yourself, you can do so here: http://www.pxlprfct.net/zid/ with user: guest and pass: guest.

Thanks for your help!

**bustacapinya** · Jun 20, 2007 05:15

Hi,

I guess your looking for some sort of auto-suggest feature, a quick search on google found the following ajax auto-suggest code

If you type a 'h' or 'd' you should see some suggestions.

hope it helps

**yasirhussain** · Jun 24, 2007 11:03

Thanks bustacapinya,

I looked for other codes as well but your suggestion worked best for me and I'm using it now.

There's another question though as I'm not a JS expert; once a suggested name has been selected from the list, I want to insert a relevant zip code (pulled from the database) be inserted into another field. It is connected to the first field. I hope you get the idea.

I'm looking for a way to implement that in the above code. Suggestions welcomed!

Thank you.

**bustacapinya** · Jun 24, 2007 12:40

Hi,

Dont mention it, Im glad I can help in any way possible.

I think an AJAX method call would be most appropiate here also, You could maybe fire the onBlur() event handler when the user clicks away from the text box. The event handler could be an ajax function that connects to the database and retrieves the postcode, then populates the related field with the returned postcode.

I have made a very simple script to give you an idea of the proposed method.
I have also made the related field READONLY, but this isnt necessary.

The script has two examples using a select box and a text box, both examples just populate the related field with the selected/typed in value of the select box or text box respectively. This all happens with help from the onBlur event handler.

Ajax aside, to make it even more simple, but arguably harder to maintain is to have an associative javascript array containing all system postcodes, this method doesnt need any ajax and therefore simpler to implement.

HTML Code:

<html>
<head>
<title>Example</title>
<script type="text/javascript" language="JavaScript">


// example A
function fillPostcodeA() {
	document.form1.postcode.value = document.form1.selcombo.value;
}

// example B
function fillPostcodeB() {
	document.form2.postcodeB.value = document.form2.txtBox.value;
}

</script>
</head>

<body>
  <p> Select a value then click any click anywhere on page to lose focus of the select box</p>
  <form id="form1" name="form1">
    
    <select name="selcombo" id="selCombo"
      onBlur=fillPostcodeA()  />
    <option value="postcode1"/>postcode1
    <option value="postcode2"/>postcode2
    <option value="postcode3"/>postcode3
    <option value="postcode4"/>postcode4
    </select>
	<input type="text" name="postcode" readonly /><br/>
  </form>
   <hr />
  <p> Type somthing in then click any click anywhere on page to lose focus of the text box</p>
  <form id="form2" name="form2">
    <input type="text" name="txtBox" onBlur=fillPostcodeB() />
    <input type="text" name="postcodeB" readonly /><br/>
    
  </form>
</body>
</html>

**yasirhussain** · Jun 24, 2007 15:00

bustacapinya thanks for your help again!

I am using your 'auto-suggest code' that you suggested earlier. Please see working example here.

I want to work it this way:

When I select a customer name (Kunde) - lets say I select 'customer 4', I want customer's name be entered into customer name textfield, and customer's zipcode (pulled also from db) be entered into zipcode textfield (PLZ(ab)) instead.

I'm not able to decipher the javascript and JSON method, in the JS library I'm using, to work it for me. If I try to use your above-mentioned function, how can I pass the zipcode value to your function to insert it into zipcode field?

Any suggestion?

**bustacapinya** · Jun 25, 2007 13:01

Hi,

You need to somehow pass the selected value to your database script then add a 'where .. = [**] ' clause to the query, where [**] will be the passed in value.

I have put some snippets together to give you a better idea. It uses the onBlur() handler, like in the last post, but this time an Ajax call is made.

This time a custom loadURL function is used as the onBlur() event handler, on the select box (could be a textbox), each time the select box loses focus a call is made to retrieve the postcode of the related name, via the db script.

The value is passed to the db script using GET.

I have attached 2 files:

A html file containing all client side code, and the db php script

HTML Code:

<html>
<title>Javascript test</title>
<head>
<script>
var req = null;
function processReqChange()
{
  if (req.readyState == 4 && req.status == 200 && req.responseText )
  {
    var postcode = req.responseText;
    document.form1.postcode.value = postcode;

  }
}

function loadUrl( url )
{
  if(window.XMLHttpRequest) {
    try { req = new XMLHttpRequest();
    } catch(e) { req = false; }
  }
  else if(window.ActiveXObject)
  {
    try { req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
    try { req = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) { req = false; }
  }
  }

  if(req) {
    req.onreadystatechange = processReqChange;
    req.open("GET", url + "?aname=" + document.form1.selcombo.value, true);
    req.send("");
  }
}




</script>
<form id="form1" name="form1">

    <select name="selcombo" id="selCombo"
      onBlur="loadUrl( 'sources/js.php' )"  />
    <option value="Paul Smith"/>Paul Smith</option>
    <option value="Daniel Smith"/>Daniel Smith</option>
    </select>
	<input type="text" name="postcode" readonly /><br/>
  </form>
</body>
</html>

PHP Code:


<?php

require_once("DB.php");

$name = trim(htmlspecialchars($_GET['aname'], ENT_QUOTES));

/* Select queries return a resultset */

if ($result = $mysqli->query("SELECT `author`, `title` FROM `books` where `author` = '$name'")) {

   

    /* fetch object array */

    $row = $result->fetch_row();

    $items  = $row[1];



    /* free result set */

    $result->close();

}



/* close connection */

$mysqli->close();

?>

<?php echo $items; ?>

**yasirhussain** · Jun 28, 2007 23:34

Thanks so much bustacapinya!
I got it to work like magic!!

User Tag List

Thread: AJAX help require: Yahoo! Mail like insert address

Thread Tools

Display

AJAX help require: Yahoo! Mail like insert address

ajax auto suggest

Ajax Database call

AJAX help require: Yahoo! Mail like insert address

Bookmarks

Bookmarks

Posting Permissions