Solved

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

Posted on 2011-09-27
11
191 Views
Last Modified: 2012-05-12
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.
0
Comment
Question by:Letsgetcoding
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 
LVL 3

Accepted Solution

by:
FrankoH earned 500 total points
ID: 36715070
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
 

Author Comment

by:Letsgetcoding
ID: 36715755
Looks good.
Where do I call function() from?
0
 
LVL 3

Expert Comment

by:FrankoH
ID: 36715820
$(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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Letsgetcoding
ID: 36715959
Great stuff.

So does this just go within some <script> tags? in the header, or where can it be placed?
0
 
LVL 3

Expert Comment

by:FrankoH
ID: 36715968
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
 

Author Comment

by:Letsgetcoding
ID: 36715977
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
 

Author Comment

by:Letsgetcoding
ID: 36716067
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
 
LVL 3

Expert Comment

by:FrankoH
ID: 36716085
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
 

Author Comment

by:Letsgetcoding
ID: 36755191
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
 
LVL 3

Expert Comment

by:FrankoH
ID: 36813192
you will need to post your script so I can see what your doing.
0
 

Author Comment

by:Letsgetcoding
ID: 36899439
<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

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to dynamically set the form action using jQuery.

738 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