Solved

How do I populate a text field with data associated in a drop down box

Posted on 2012-03-14
3
360 Views
Last Modified: 2012-03-15
I have a MySQL table where I read some rows that match my sale type.
I place the index and description into an HTML drop down box for my sales agent
(in-house) to select from.

When they make a selection, I would like to populate some text boxes with the
associated data like price  and weight, etc.

So far, I have the data in a php array, one per record that matches the possibilities.
 
for ($i = 0; $i < $SCRows; ++$i)
{
    $row = mysql_fetch_array($SCResult);
    if ($row['Category'] = 'S')
      {
    $SCCodes[$i] = "   <option Value=".$row['SCRecNo'].'>'.$row['CallResultDescription'].'</option>\n\r';
    $SCJSON[$i]  = "   <option Value = ".$row['SCRecNo'].'>'.json_encode($row)."></option>\n\r";
      }
}

 

Open in new window


I have the data in memory, I am trying to not call the server again (I don't know how to, I presume AJAX but I don't know AJAX, yet...

I was going to put a json_encode string as the text in a hidden drop down and traverse that
by javascript each time the agent makes a selection.  Then parse that string and display the
associated values in a text box for the agent to see the values that go with their selection.

Am I clear?
Thanks in advance!
0
Comment
Question by:pootwaddle
  • 2
3 Comments
 
LVL 13

Accepted Solution

by:
dsmile earned 500 total points
Comment Utility
This is a simple approach using jquery.
In your case, recordInfo should get your json encoded string that could be easily get by call

var recordInfo = $('#YOUR_HIDDEN__FIELD_ID').val();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
 </head>

 <body>
  <form method="post" action="#" id="frm_test">
	Select me to change text values<select name="cmb" id="cmb">
		<option value="">-----</option>
		<option value="0">Item 1</option>
		<option value="1">Item 2</option>
		<option value="2">Item 3</option>
	</select><br />
	Price:  <input type="text" name="txtPrice" id="txtPrice"><br />
	Weight: <input type="text" name="txtWeight" id="txtWeight">
  </form>
  
  <script language="JavaScript">
  <!--
	var recordInfo = {0:{'price':'1000', 'weight':'100'}, 1:{'price':'1001', 'weight':'101'}, 2:{'price':'1002', 'weight':'102'}};

	$('#cmb').change(function() {
	  var selected = $("#cmb option:selected").val();
	  $('#txtPrice').val(recordInfo[selected].price);
	  $('#txtWeight').val(recordInfo[selected].weight);
	});

  //-->
  </script>
 </body>
</html>

Open in new window

0
 

Author Comment

by:pootwaddle
Comment Utility
Thank you, dsmile -
Your code does exactly what I need.

Working backwards, I need to figure out how to get my
PHP associative array into the Javascript array.

So far I have.

1. Lookup records from MySQL, each of them containing ~ 25 fields.
2. find number of rows using mysql_num_rows...
3. iterate through the rows using mysql_fetch_array (gives me my PHP
associative array in $SCCodes[])

4. Put the Record ids and descriptions into a dropdown box.

and here is where I need more help -
when the user selects an item from the dropdown box I
need to search through a javascript array to find the corresponding
record where RecordID matches the selected one in the drop down box.

(It is in a PHP array, currently, although I contemplated storing it in a
hidden html dropdownbox)

And thanks to you I can pick up here...
Then, I use the .change function you gave me I can set my text boxes with
the data from the correct row.

Thanks again!! (oh, and I was going to use jquery for some stuff anyway!)
I'm doing well in PHP, but not so much in Javascript...
0
 

Author Closing Comment

by:pootwaddle
Comment Utility
After letting this soak in overnite and reading the answer a couple more times it is clear that he answered the entire question, or enough to point me in the direction I need to go.

Thank you!!
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Java Server Faces parameter pass? 6 19
HTML CSS 7 15
Filter wordpress query 3 8
Bootstrap Columns not Side-by-Side 3 10
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
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…

744 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