Solved

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

Posted on 2011-09-27
11
171 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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

Easy Project Management (No User Manual Required)

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Both Easy and Powerful How easy is PHP? http://lmgtfy.com?q=how+easy+is+php (http://lmgtfy.com?q=how+easy+is+php)  Very easy.  It has been described as "a programming language even my grandmother can use." How powerful is PHP?  http://en.wikiped…
Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
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 and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

758 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

20 Experts available now in Live!

Get 1:1 Help Now