Solved

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

Posted on 2011-09-27
11
175 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
  • 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

These days socially coordinated efforts have turned into a critical requirement for enterprises.
This article discusses four methods for overlaying images in a container on a web page
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.

914 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now