PHP/ jQuery - How do I get the result im after.

I have a combo box that I need to populate a few fields with data for the selected record. I know how to do the PHP to get records etc, but when it comes to jQuery I'm unsure of how to do it cleanly. Any ideas?

Combo box - cboSupplier
Textbox - txtName
Textbox - txtAddress
Textbox - txtPhone

When the combo box is changed to a different record, the textbox will change accordingly.
LetsgetcodingAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

FrankoHCommented:
One way to do it is you can map an array to the index of the drop down. So:

var suppliers = Array();
// First supplier
suppliers[0] = new Array( "Name" , "Address" , "Phone" );
// Second supplier
suppliers[1] = new Array( "Name" , "Address" , "Phone" );
// Thrid supplier
suppliers[2] = new Array( "Name" , "Address" , "Phone" );


$(function(){
	
	$("select[name=cboSupplier]").change(function(){
		
		$("input[name=txtName]").val(suppliers[$(this).attr("selectedIndex")][0]);
		$("input[name=txtAddress]").val(suppliers[$(this).attr("selectedIndex")][1]);
		$("input[name=txtPhone]").val(suppliers[$(this).attr("selectedIndex")][2]);
		
	});
	
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
LetsgetcodingAuthor Commented:
Looks good.
Where do I call function() from?
0
FrankoHCommented:
$(function(){  }) basically tells the browser to execute the script within its brackets once the page has loaded.

$("select[name=cboSupplier]").change(function(){  }) attaches an event listener that will trigger when the drop down is changed to another value.

So you dont need to call function() per say, the updates will happen on change of the drop down.
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

LetsgetcodingAuthor Commented:
Great stuff.

So does this just go within some <script> tags? in the header, or where can it be placed?
0
FrankoHCommented:
yes exactly right, just pop it in a script block in your header & I am assuming you already have jquery loaded in the document as well.

You will of course need to populate the javascript array with the relevant details for your suppliers based on your server side data e.g.

suppliers[0] = new Array( "<?php echo $name; ?>" , "<?php echo $address; ?>" , "<?php echo $phone; ?>" );

Open in new window

0
LetsgetcodingAuthor Commented:
Hmm, makes it a tiny bit messy as I am requiring pages to an index page.

Will give this a go and get back to you in a moment!
0
LetsgetcodingAuthor Commented:
Works a charm!

Now to be more of a pain...
When I load a record, how can I go about setting the selected combo item?
0
FrankoHCommented:
In your options you can match the value and set it to selected e.g.

<option value="<?php echo $optionvalue; ?>" <?php if( $optionvalue == $preloadvalue ) { echo " selected =\"selected\" "; } ?>>

Open in new window

0
LetsgetcodingAuthor Commented:
Hey there,

That works great, but the details don't load by default. I have to change to a different option, then change back for it to load the information.

Any ideas?
0
FrankoHCommented:
you will need to post your script so I can see what your doing.
0
LetsgetcodingAuthor Commented:
<tr><td><label for="supplier">Supplier</label></td><td colspan="3"><select style="width:190px" name="cbosupplier" id="q"/>
<option value="">None</option>
<?php
$sql2="SELECT * FROM tblSuppliers";
$rs2=mysql_query($sql2);
while($row2=mysql_fetch_array($rs2)){
  echo '<option value="'.$row2['colID'].'" ';
  echo (($row2['colID']==$row['colSupplier'])?"selected=selected":"");
  echo '>'.$row2['colName'].'</option>';
};
?>
</select></td></tr>

Open in new window


Sorry about the delay in response.
The above is the code to loading the current supplier on the selected product.

This is the script for loading the records.
<script type="text/javascript">
var suppliers = Array();
suppliers[0] = new Array("","","","","","","","","");
<?php
$i=1;
require_once('php/cninfo.php');
$cn=mysql_connect($host_ip,$host_un,$host_pw);
mysql_select_db($host_db);
$sql="SELECT * FROM tblSuppliers";
$rs=mysql_query($sql);
while($row=mysql_fetch_array($rs)){
?>
  suppliers[<?php echo $i; ?>] = new Array("<?php echo $row['colName']; ?>", "<?php echo $row['colContact']; ?>", "<?php echo $row['colAddress']; ?>" , "<?php echo $row['colSuburb']; ?>","<?php echo $row['colCity']; ?>","<?php echo $row['colPhone']; ?>","<?php echo $row['colFax']; ?>","<?php echo $row['colEmail']; ?>","<?php echo $row['colWebsite']; ?>" );
<?php
$i++;
};
?>
$(function(){
	$("select[name=cbosupplier]").change(function(){
		$("input[name=txtname]").val(suppliers[$(this).attr("selectedIndex")][0]);
		$("input[name=txtcontact]").val(suppliers[$(this).attr("selectedIndex")][1]);
		$("input[name=txtaddress]").val(suppliers[$(this).attr("selectedIndex")][2]);
		$("input[name=txtsuburb]").val(suppliers[$(this).attr("selectedIndex")][3]);
		$("input[name=txtcity]").val(suppliers[$(this).attr("selectedIndex")][4]);
		$("input[name=txtphone]").val(suppliers[$(this).attr("selectedIndex")][5]);
		$("input[name=txtfax]").val(suppliers[$(this).attr("selectedIndex")][6]);
		$("input[name=txtemail]").val(suppliers[$(this).attr("selectedIndex")][7]);
		$("input[name=txtwebsite]").val(suppliers[$(this).attr("selectedIndex")][8]);
	});
});
</script>

Open in new window


0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.