Solved

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

Posted on 2011-09-27
11
180 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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 …

813 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

15 Experts available now in Live!

Get 1:1 Help Now