Autofill fields when select box option is selected

An option to consider here is to store ALL the data you need in the SELECT, and then when it's changed, you're not having to go back to the server to make another request. You would store the info you need in 'data' attributes and then just pull them when the SELECT changes.

Build your <OPTION> tags like this:

<option value="id" data-phone1="phone1" data-phone2="phone2" data-email="email">Persons Name</option>

* Replace the italics with your database values!

Then in jQuery, bind the change() event to the SELECT and update the form fields by grabbing the relevant info using the data() method:

$('select[name="custContact"]').change(function() {
   $('#officePhone').val( $(this).data('phone1') );
   $('#mobilePhone').val( $(this).data('phone2') );
   $('#emailAddress').val( $(this).data('email') );
});

Select allOpen in new window

All the data-* attributes you store with each <option> are then available in your jQuery - no round trip to the server..

Hope that makes sense but ask if not :)

Great idea.  I've got the code in place, but it's not filling in the fields.  Where did I go wrong?

		echo '<form class="contact_form" action="#" method="post" name="contact_form" id="issueForm">
				<li>
					<label for="contact">Company Contact:</label>
					<select name="custContact" class="compContact" required>
						<option value = "">Select Contact...</option>';
						
						//Get Contacts
						$getContacts = mysql_query("SELECT id, name, forename, phone1, phone2, email FROM pr_contacts WHERE company = '".$companyNameid."' AND active = '1' ORDER BY forename, name") or die("Cannot pull contacts: " . mysql_error());
						
						if(mysql_num_rows($getContacts) > 0)
							{
							while($contData = mysql_fetch_assoc($getContacts))
								{
								echo '<option value = "'.$contData['id'].'"'; if($contData['id'] == $_POST['custContact']) { echo "Selected = 'SELECTED'";} echo ' data-phone1= '.$contData['phone1'] . ' data-phone2= ' . $contData['phone2'] . ' data-email= ' . $contData['email'] . '>'.$contData['forename'] . ' ' . $contData['name'] . '</option>';
								}
							}
							
					echo '</select>&nbsp;&nbsp;<span class="boldblacklinks"><a href="addContact.php?comp='.$companyNameid.'" class="iframetall">Create Contact</span></a>
				</li>
				<li>
				<label for="requireUpdate">Request Update:</label>	
					<table width = "450px" border = "0">
						<tr>
							<td width = "225px"><input type="radio" name="reqUpdate" value = "1" class="reqUpdate" style="width:10px; padding-right:0px;"/>Yes, Update Customer</td>
							<td width = "225px"><input type="radio" name="reqUpdate" class="reqUpdate" value = "0" style="width:10px; padding-right:0px;" />No Update Required</td>
						</tr>
					</table>
				</li>
				<div id="contactInfo" style="display:none;">
					<li>
						<label for="officePhone">Office Phone:</label>
						<input type="text" name="officePhone" id="officePhone" />
					</li>
					<li>
						<label for = "mobilePhone">Mobile Phone:</label>
						<input type="text" name="mobilePhone" id="mobilePhone" />
					</li>
					<li>
						<label for = "email">Email: </label>
						<input type="text" name="emailAddress" id="emailAddress" />
					</li>
				</div>';
?>

<script type='text/javascript'>
$(document).ready(function() 
	{
	$('.reqUpdate').click(function(){
		if($(this).val() == 0) 
			{
			$('#contactInfo').hide();
			} 
			
		else 
			{
			$('#contactInfo').show();
			}
		});
		
	$('select[name="custContact"]').change(function() {
	   $('#officePhone').val( $(this).data('phone1') );
	   $('#mobilePhone').val( $(this).data('phone2') );
	   $('#emailAddress').val( $(this).data('email') );
	});
	

	});
	
</script>

Select allOpen in new window

The code that creates your <option> looks a little off (it's quite difficult to tell when concatenating strings like this). Maybe some missing quotes around the data attributes - the easiest way to tell is to view the source once you've loaded your page.

An easier option, which I think makes things much easier to read and debug, is to use the printf() function, instead of trying to concatenate with echo statements. Have a look at this and see if it makes sense:

if(mysql_num_rows($getContacts) > 0) :
	while($contData = mysql_fetch_assoc($getContacts)):
		$option = '<option value="%s" data-phone1="%s" data-phone2="%s" data-email="%s" %s>%s</option>';
		$selected = ($contData['id'] == $_POST['custContact']) ? "Selected = 'SELECTED'" : '';
		printf(
			$option,
			$contData['id'],
			$contData['phone1'],
			$contData['phone2'],
			$contData['email'],
			$selected,
			$contData['forename'] . ' ' . $contData['name']
		);
	endwhile;
endif;

Select allOpen in new window

The code above did not work either.  here is what the page produces:

<li>
	<label for="contact">Company Contact:</label>
	<select name="custContact" class="custContact" required>
		<option value = "">Select Contact...</option>
		<option value = "60598" data-phone1= "847-451-5000" data-phone2= "312-623-2376" data-email= "alex.shleymovich@hillmech.com">Alex Shleymovich</option>
		<option value = "92563" data-phone1= "847-451-4218 " data-phone2= "773 220 3882" data-email= "anthony.borgnini@hillmech.com">Anthony  Borgnini</option>	
	</select>
</li>

		
	$('.custContact').change(function() {
	   $('.officePhone').val( $(this).data('phone1') );
	   $('.mobilePhone').val( $(this).data('phone2') );
	   $('.emailAddress').val( $(this).data('email') );
	});

Select allOpen in new window

Please note the above code are just the two extracts that we are working with.  I figured it would be cleaner to post that instead of the full code.

<div id="contactInfo" style="display:none;">
							<li>
								<label for="officePhone">Office Phone:</label>
								<input type="text" class="officePhone" name="officePhone" id="officePhone" />
							</li>
							<li>
								<label for = "mobilePhone">Mobile Phone:</label>
								<input type="text" class="mobilePhone" name="mobilePhone" id="mobilePhone" />
							</li>
							<li>
								<label for = "email">Email: </label>
								<input type="text" class="emailAddress" name="emailAddress" id="emailAddress" />
							</li>
						</div>

Select allOpen in new window

That'll do it it!  Thank you so much!!