Solved

How to populate Text Boxes upon selection of value from Drop Down Box using AJAX and PHP

Posted on 2015-01-27
14
650 Views
Last Modified: 2015-01-28
Hello Experts,

I have a HTML Document that contains two Drop Down Boxes and two Text Boxes. The first Drop Down Box is for selecting Solicitor Firm Names.

The values in the second Drop Down box should contain Solicitor Names and depends on the selection of the first Drop Down Box. I have managed to get this working using AJAX and a PHP file that queries the database and returns the results back to the AJAX file.

However, the values in the two Text Boxes, which should contain the Solicitor Phone and Solicitor Email, depend on the selection of a Solicitor Name from the second Drop Down Box.

I have been unsuccessful at this and would required some help and guidance. I have laid out the codes as below:

The Code for the HTML is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sections Demo</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src = "javascript/firmsAndSolicitors.js"></script>
</head>
<!-- Insolvency Eye Working Example -->
<body>

<table id = "tblFilterSearches">
    <tr>
        <td style = "width: 50%;">Solicitor Firms:</td>
        <td style = "width: 50%;">
            <select name="SolicitorFirms" id = "SolicitorFirms" class="SolicitorFirms">
                <option value = '0' selected="selected">--Select Solicitor Firm--</option>
                <?php
                    include('db.php');
                    $sql = mysql_query("SELECT SolicitorFirmID, SolicitorFirmName FROM tblSolicitorFirms ORDER BY SolicitorFirmName", $con);
                    while($row = mysql_fetch_array($sql))
                    {
                        $solicitorFirmID = $row['SolicitorFirmID'];
                        $solicitorFirmName = $row['SolicitorFirmName'];
                        echo "<option value = '" . $solicitorFirmID . "'>" . $solicitorFirmName . "</option>";
                    } 
                ?>
            </select>
        </td>
    </tr>
    <tr>
        <td style = "width: 50%;">Solicitors:</td>
        <td style = "width: 50%;">
            <select name="Solicitors" id="Solicitors" class="Solicitors">
                <option selected="selected">--Select Solicitor--</option>
            </select>
        </td>
    </tr>
    <tr>
        <td style = "width: 50%;">Solicitor Phone No:</td>
        <td style = "width: 50%;"><input name="SolicitorPhoneNo" id="SolicitorPhoneNo" class='inputBoxStyle' value = ''></td>
    </tr>
    <tr>
        <td style = "width: 50%;">Solicitor Email:</td>
        <td style = "width: 50%;"><input name='SolicitorEmail' id='SolicitorEmail' class='inputBoxStyle' value = ''></td>
    </tr>
    <tr>
        <td style = "width: 50%;">Constant Value:</td>
        <td style = "width: 50%;"><input name='ConstantValue' id='ConstantValue' class='inputBoxStyle' value = 'This is a Constant Value'></td>
    </tr>
</table>

</body>
</html>

Open in new window


The Code for the AJAX file (called firmsAndSolicitors.js) is as follows:

$(document).ready(function()
{
	//Send the SolicitorFirmID to the PHP file to repopulate the Solicitor Names
	$("#SolicitorFirms").change(function()
	{
		var solicitorFirmID = $(this).val();
		var dataString = 'SolicitorFirmID=' + solicitorFirmID;
		
		$.ajax
		({
			type: "POST",
			url: "ajax_city.php",
			data: dataString,
			cache: false,
			success: function(html)
			{
				$("#Solicitors").html(html);
			} 
		});
	});	


	//Send the SolicitorID to the PHP file to repopulate the Solicitor Phone and Solicitor Email
	$("#Solicitors").change(function()
	{
		var solicitorsID = $(this).val();
		var dataString = 'SolicitorsID=' + solicitorsID;
		
		$.ajax
		({
			type: "POST",
			url: "ajax_city.php",
			data: dataString,
			cache: false,
			success: function(data)
			{
				//alert("This is the Solicitor Name Change");
				
				//$("#SolicitorPhoneNo").attr('src', data);
				$("#SolicitorPhoneNo").val(data);
				$("#SolicitorEmail").val(data);				
			}
		});	
	});	

});

Open in new window


The Code for the PHP file (called ajax_city.php) is as follows:

<?php
	# Insolvency Eye Working Example
	
	include('db.php');
	
	# Send values for Solicitor Names depending on the Solicitor Firm that the user has selected
	if($_POST['SolicitorFirmID'])
	{
		$solicitorFirmID = $_POST['SolicitorFirmID'];		
		echo "<option value = '0' selected = 'selected'>--Select City--</option>";

		if ( $solicitorFirmID != 0 )
		{
			$sql = mysql_query("SELECT * FROM tblSolicitors WHERE SolicitorFirmID = " . $solicitorFirmID . " ORDER BY SolicitorName", $con);

			while($row = mysql_fetch_array($sql))
			{
				$solicitorsID = $row['SolicitorsID'];
				$solicitorName = $row['SolicitorName'];
				echo "<option value = '" . $solicitorsID . "'>" . $solicitorName . "</option>";
			}	# End of While
		}	# End of IF Statement checking value of SolicitorFirmID
	}
	else
	{
		echo "<option value = '0' selected = 'selected'>--Select City--</option>";		
	}	# End of IF Statement checking if the SolicitorID has been POSTED


	# Send values for Solicitor Phone and Email depending on the Solicitor Name that the user has selected
	if($_POST['SolicitorsID'])
	{
		$solicitorsID = $_POST['SolicitorsID'];		

		if ( $solicitorsID != 0 )
		{
			$sql = mysql_query("SELECT * FROM tblSolicitors WHERE SolicitorsID = " . $solicitorsID, $con);
			$row = mysql_fetch_assoc($sql);

			$solicitorPhoneNo = $row['SolicitorPhoneNo'];
			$solicitorEmail = $row['SolicitorEmail'];

			//echo $solicitorPhoneNo;
			//echo $solicitorEmail;
			echo "<input name='SolicitorPhoneNo' id='SolicitorPhoneNo' class='inputBoxStyle' value = '" . $solicitorPhoneNo . "'>";
			echo "<input name='SolicitorEmail' id='SolicitorEmail' class='inputBoxStyle' value = '" . $solicitorEmail . "'>";

		}	# End of IF Statement checking value of SolicitorFirmID
	}
	else
	{
		//echo "<input name='SolicitorPhoneNo' id='SolicitorPhoneNo' class='inputBoxStyle' value = ''>";
		//echo "<input name='SolicitorEmail' id='SolicitorEmail' class='inputBoxStyle' value = ''>";
	}	# End of IF Statement checking if the SolicitorID has been POSTED
?>

Open in new window


I need to know what output to send from the PHP file and what script to write in the AJAX file so that the Text Boxes are populated with the required return values i.e. the Solicitor Phone No to be populated into the Text Box with the ID 'SolicitorPhoneNo' and the Solicitor Email Address to be populated into the Text Box with the ID 'SolicitorEmail'.

Thanks in advance and all help is appreciated.

ref-IT
0
Comment
Question by:ref-IT
  • 7
  • 7
14 Comments
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 40572983
Probably the easiest option here is to do the whole thing with a single AJAX lookup. When you pass the SolicitorsID to your PHP function, just include the telephone number and email in the <OPTION> tags, using data elements, so instead of building it like this:

$solicitorsID = $row['SolicitorsID'];
$solicitorName = $row['SolicitorName'];
echo "<option value = '" . $solicitorsID . "'>" . $solicitorName . "</option>";

Open in new window


Build it like this:
$solicitorsID = $row['SolicitorsID'];
$solicitorName = $row['SolicitorName'];
$solicitorTel = $row['SolicitorPhoneNo'];
$solicitorEmail = $row['SolicitorEmail'];
echo "<option value = '" . $solicitorsID . "' data-tel='" . $solicitorTel . "' data-email='" . $solicitorEmail . "'>" . $solicitorName . "</option>";

Open in new window


This way you only ever have to make a single AJAX request to a single DB request. You can then retrieve these data tags like so:

$("#Solicitors").change(function() {
	var solicitor = $("#solicitor option:selected" );
	$('#SolicitorPhoneNo').val(solicitor.data('tel'));
	$('#SolicitorEmail').val(solicitor.data('email'));
});

Open in new window

0
 
LVL 2

Author Comment

by:ref-IT
ID: 40573188
Hey Chris,

Thank you very much for the reply. You are a genius man !!

Having an MS Access VBA coding background, I know that we can have multiple columns in a Drop Down Box. I had thought implementing something similar but I just wasn't sure how to go about doing it. I think your suggestion might just work.

Please give me some time to test it and I'll get back to you with full on points !!

Thanks,

ref-IT
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40573264
No worries - once you get a handle on the data attributes, it may well save you a lot of time and effort - it means you can store a whole lot more data with the elements than you otherwise could :)
0
NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

 
LVL 2

Author Comment

by:ref-IT
ID: 40574057
Hey Chris,

Okay, I've tested the data and the ajax_city.php file returns the values of the Solicitors Drop Down Box just fine together with the data-tel and data-email attributes. The Javascript file however, does not seem to be able to pick on the data-tel and data-email values.

I realised that you've made a slight mistake in the Javascript code but the data-tel and data-email values are still being returned as null values.

The following is the code that I've used to display the data-tel and data-email values:

	//Populate the Solicitor Phone No and the Solicitor Email based on the
	$("#Solicitors").change(function() {
		var solicitor = $("#Solicitors option:selected");
		
		var solicitorID = solicitor.val()
		var solicitorPhoneNo = solicitor.data("tel");
		var solicitorEmail = solicitor.data("email");
		
		alert(solicitorID + " " + solicitorPhoneNo + " " + solicitorEmail);
	});

Open in new window



I get the solicitorID just fine, but the data-tel and data-email values are returned as null.

Any ideas why this could be happening?

Thanks,

ref-IT
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40574138
The only thing I see in your code is a missing semi-colon after the var SolicitorID line. Without seeing the generated HTML, can't realy see anything else wrong.
0
 
LVL 2

Author Comment

by:ref-IT
ID: 40574909
Hey Chris,

Thanks for the response.

The results are the same even if I put in the semi-colon after the var solicitorID = solicitor.val() line. The data-tel and data-email values are still being returned as null values.

An example of the generated HTML when some of the Solicitor Firms are selected is as follows:

<!-- When Solicitor Firm name Wardhaway is selected -->
<select name="Solicitors" id="Solicitors" class="Solicitors">
<option value="0" selected="selected">--Select Solicitor--</option>
<option value="1" data-tel="020 8564 1245" data-email="steven.petrie@wardhadaway.com">Steven Petrie</option>
<option value="2" data-tel="020 8716 1249" data-email="sue.wood@wardhadaway.com">Sue Wood</option>
</select>

<!-- When Solicitor Firm name Pannone Corporate is selected -->
<select name="Solicitors" id="Solicitors" class="Solicitors">
<option value="0" selected="selected">--Select Solicitor--</option>
<option value="8" data-tel="020 8741 2369" data-email="daniel.clarke@pannonecorporate.com">Daniel Clarke</option><option value="7" data-tel="020 8125 1369" data-email="karl.williams@pannonecorporate.com">Karl Williams</option></select>

<!-- When Solicitor Firm name Zain & Associates is selected -->
<select name="Solicitors" id="Solicitors" class="Solicitors">
<option value="0" selected="selected">--Select Solicitor--</option>
<option value="62" data-tel="0208 451 3461" data-email="ali@zainassociates.co.uk">Ali Smith</option>
<option value="63" data-tel="" data-email="">Joseph Smith</option>
<option value="58" data-tel="0208 451 3461" data-email="sarah@zainassociates.co.uk">Sarah Smith</option></select>

Open in new window


Hope this helps to figure out what the problem could be.

Thanks,

ref-IT.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40574933
OK. It all looks good to me.

You can see it working correctly here -> http://jsfiddle.net/ChrisStanyon/6f0ew1kb/

Is there a live demo page that I can take a look at to see where things are going wrong?
0
 
LVL 2

Author Comment

by:ref-IT
ID: 40575109
Hey Chris,

Let me upload it to my Web Server and I'll send you the link and you can take a look.

Thanks,

ref-IT
0
 
LVL 2

Author Comment

by:ref-IT
ID: 40575770
Hey Chris,

My apologies for the delay.

Please take a look at the following link:

http://www.insolvencyeye.co.uk/sandbox/Dynamic_Select_Box/InsolvencyEye%20Working%20Example/sections_demo.php

Thanks,

ref-IT.
0
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 500 total points
ID: 40575862
Ahhh. Got it - you're using a really old version of jQuery (1.4.2) so it won't work - upgrade to at least 1.4.3 (preferably a lot newer) - you're at least 30 versions behind the current one!!!
0
 
LVL 2

Author Comment

by:ref-IT
ID: 40576185
WOW ... I would never have thought of looking there !!

Just tested the code and it worked seamlessly as soon as I changed the version to 1.4.3. How do I find out what the latest version is so that I can change it to that.

Chris, honestly thanks a lot mate. You've allowed me to make the application I'm working on look even slicker.

Thanks,

ref-IT.
0
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 500 total points
ID: 40576525
Excellent news - knew we'd get there in the end :)

You can head to jquery.com to see which is the latest version or if you want to carry on using the google CDN, then you can check out their page - it'll show you which versions they host:

https://developers.google.com/speed/libraries/devguide

Here's another trick. If you use the google CDN, you can drop the minor version numbers and google will automatically serve the highest version it can, so if you link to this:

//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

It will automatically deliver the highest version 1 package it can (1.11.2)

If you do this, you'll always have the latest version, but obviously your site will automatically update when google's does and that may break some part of your application.

Also, in your script tag, drop out the http: and you'll never receive 'unsecure' error messages - if your page is on https, you'll get the https version. If it's on http, then you'll get the http version. Saves headaches down the line :)

To link to the latest version 1 jquery, your script tag would look like this:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Open in new window

0
 
LVL 2

Author Closing Comment

by:ref-IT
ID: 40576595
Thanks a million for all the help there Chris.

You've not only been spot on and punctual, but also highly informative. Certainly hope to learn a lot more from you in the future.

ref-IT
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40576613
No worries. Thanks for the points :)
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question