Page 1 of 1

10 rows w/ ea. containing dynamic select menu w/ desc. field

Posted: Tue Oct 25, 2005 3:37 pm
by Curtis782
I have a MySQL DB containing 2 tables, a part # table and description table. Each table row contains 2 records (id, and input) to match part numbers with their relevant description.

I have a record "add" form with 10 rows, each row containing a select menu for the part #'s and a field for the description.

Scenerio: when a user selects a part # from the pull-down, the relevant description should be printed next to it.

I'd like the part # list to be a dynamic select menu if possible.

How can I do this? I tried looking this up online and tried various code samples but none helped... I am a novice PHP programmer. Any help would be greatly appreciated!

Posted: Tue Oct 25, 2005 3:47 pm
by comrad
If each part has only one description, why not have one table?
[[ id , partnum , descrip ]]

To make the select boxes always reflect the DB run something like this:

Code: Select all

<select name="partnum">
    <? $getparts=mysql_query("select * from parts");
       while ($part=mysql_fetch_assoc($getparts)){
echo "<option value="$part[partnum]">$part[partnum]</option>";
                                                                             }?>
</select>
A change in the DB changes the select options.
As for seeing the description, you may need to reload the page by submitting the form.
Self reload from the select box?
Need to sticky any other form data?

Re: 10 rows w/ ea. containing dynamic select menu w/ desc. f

Posted: Tue Oct 25, 2005 4:11 pm
by RobertGonzalez
Curtis782 wrote:I have a MySQL DB containing 2 tables, a part # table and description table. Each table row contains 2 records (id, and input) to match part numbers with their relevant description.

I have a record "add" form with 10 rows, each row containing a select menu for the part #'s and a field for the description.

Scenerio: when a user selects a part # from the pull-down, the relevant description should be printed next to it.

I'd like the part # list to be a dynamic select menu if possible.
Do you want the population of the text to be dynamic as well? Something like when a user changes the value of the select list the corresponding description "automagically" appears in the text box next to it? Clarify your question a little bit if possible. Right now this sounds like something that could be handled with DOM or straight Javascript.

More info on what I'm trying to accomplish...

Posted: Wed Oct 26, 2005 10:24 am
by Curtis782
Thank you for the advice you gave me so far. Here is a screenshot of what I am trying to accomplish... selecting a part number would then print the relevant description:

Image

I'd like to somehow create the part number and description as 2 separate variables so I can send this info to my database, along with the rest of the workorder data.

I was only able to get so far as the first row in the screenshot (from following a tutorial on the web)... I tried copying my code but it wouldn't populate any of the other select boxes in the remaining rows. As such (and the tutorial code being somewhat complex and not designed for multiple rows as in the screenshot) I'd like to scrap my existing code for something more relevant to what I'm trying to accomplish. I'm not sure if I might need to create some kind of array (which I know nothing about), etc.

Any more help would be very much appreciated. :-)

Posted: Wed Oct 26, 2005 10:45 am
by RobertGonzalez
OK, my next question is do you want this to happen within the browser or do you want it to happen by hitting the server? Basically it comes down to a question of using DOM (client-side interaction) or PHP (server-side interaction). From there you will be able to determine what your code should be.

Posted: Wed Oct 26, 2005 11:21 am
by Curtis782
I'm a big fan of using PHP but I guess whatever is best. But I'm assuming client-side interaction is best vs. hitting the server... would this involve JavaScript?

Posted: Wed Oct 26, 2005 1:25 pm
by RobertGonzalez
Yeah, it would definitely involve javascript if you want the action to be immediate and happen within the browser. This is not difficult to do but it will involve some searching around for an appropriate script and modifying the JS code to match your needs. I am certain this will utilize DOM scripting and the heavy use of ID's within each form element (not a bad idea anyway).

There was also a suggestion earlier in this thread that you modify your table structure to include the description of the item in the same table as the item name and id. This is a good idea. Seeing as you are dealing with unique information within each record in the tables, it makes sense to combine them so you don't have to query using joins and such later on. This makes for easier PHP coding, easier SQL writing and less strain on the DB server when processing.

Posted: Wed Oct 26, 2005 2:44 pm
by Curtis782
Thank you for this new info... I think I will create just 1 table as it should be easier to work with at that point (I hope!). Not quite sure how to do the JS however but am sure I can find something on the web.

Posted: Wed Oct 26, 2005 3:27 pm
by Curtis782
I updated my script and was curious if anyone might know how I could print the description as text, to the right of the pull-down menu if the relevant part number is selected?

Code: Select all

<?php

print "<html>";
print "<body>";
print "<form>";

include ("common_vars.php");

mysql_connect("$DB_HOSTNAME1", "$DB_USERNAME1", "$DB_PASSWORD1") or die("Database error!");
mysql_select_db("$DB_NAME1");

// pull-down menu for products
print "<select name='product1'>";
$query = "SELECT * FROM sunparts";
$result = mysql_query($query);
while ($item = mysql_fetch_array($result))
{
	$id = $item['id'];
	$partnum = $item['partnum'];
	$description = $item['description'];
	print "<option value='$id'>$partnum</option>\n";
}
print "</select>";

// figure out how to print description if relevant partnum is selected

print "</form>";
print "</body>";
print "</html>";

?>

Posted: Wed Oct 26, 2005 4:31 pm
by RobertGonzalez
What you're more than likely going to want to do is set up text input box next to the select list. Have the select list trigger a javascript onChange event that returns the description value of the item number based on the id value passed to the select list. The value returned by the onChange event should be set to change the value of the text box to the description that matches the id value of the selected item.

For stylistic purposes, make the text box transparent by using CSS to change the color values to that of the background of the page to make it look like the triggered text description is just showing up as text on the page.

A really good forum for getting great Javascript help is the CodingForums. The other languages presented in their forum are a little lacking, but the javascript forum is really informative.

Posted: Wed Oct 26, 2005 4:48 pm
by RobertGonzalez
I knew I had seen something like this before. I found this little guy at Matt Kruse's web site. I have combined the form and the javascript into one file, but you could easily split the commented out javascript code and save it to textfill.js in the same directory as the page and it will work fine also. Copy the entire code below and save it to a new file called textfill.html. Open the file in a browser and see what happens when you select something from the drop down list...

Code: Select all

<html>
<head>
	<title>JavaScript Textbox Filler - by Matt Kruse</title>
<!-- <script language="JavaScript" src="textfill.js"></script> -->
<script language="JavaScript">
<!--//
// ===================================================================
// Author: Matt Kruse <matt@mattkruse.com>
// WWW: http://www.mattkruse.com/
//
// NOTICE: You may use this code for any purpose, commercial or
// private, without any further permission from the author. You may
// remove this notice from your final code if you wish, however it is
// appreciated by the author if at least my web site address is kept.
//
// You may *NOT* re-distribute this code in any way except through its
// use. That means, you can include it in your product, or your web
// site, or any other form where the code is actually being used. You
// may not put the plain javascript up on your site for download or
// include it in your javascript libraries for download. 
// If you wish to share this code with others, please just point them
// to the URL instead.
// Please DO NOT link directly to my .js files from your site. Copy
// the files to your server and use them there. Thank you.
// ===================================================================

// -------------------------------------------------------------------
// autoComplete (text_input, select_input, ["text"|"value"], [true|false])
//   Use this function when you have a SELECT box of values and a text
//   input box with a fill-in value. Often, onChange of the SELECT box
//   will fill in the selected value into the text input (working like
//   a Windows combo box). Using this function, typing into the text
//   box will auto-select the best match in the SELECT box and do
//   auto-complete in supported browsers.
//   Arguments:
//      field = text input field object
//      select = select list object containing valid values
//      property = either "text" or "value". This chooses which of the
//                 SELECT properties gets filled into the text box -
//                 the 'value' or 'text' of the selected option
//      forcematch = true or false. Set to 'true' to not allow any text
//                 in the text box that does not match an option. Only
//                 supported in IE (possible future Netscape).
// -------------------------------------------------------------------
function autoComplete (field, select, property, forcematch) {
	var found = false;
	for (var i = 0; i < select.options.length; i++) {
	if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
		found=true; break;
		}
	}
	if (found) { select.selectedIndex = i; }
	else { select.selectedIndex = -1; }
	if (field.createTextRange) {
		if (forcematch && !found) {
			field.value=field.value.substring(0,field.value.length-1); 
			return;
			}
		var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
		if (cursorKeys.indexOf(event.keyCode+";") == -1) {
			var r1 = field.createTextRange();
			var oldValue = r1.text;
			var newValue = found ? select.options[i][property] : oldValue;
			if (newValue != field.value) {
				field.value = newValue;
				var rNew = field.createTextRange();
				rNew.moveStart('character', oldValue.length) ;
				rNew.select();
				}
			}
		}
	}
//-->
</head>
<body bgcolor=#ffffff link="#00615f" vlink="#00615f" alink="#00615f">

Click on a select list drop down element and it will populate the text box on the right of it...
<br /><br />
<form>
<select name="options" onChange="this.form.tbToFill.value=this.options[this.selectedIndex].value">
	<option value="adam">adam
	<option value="george">george
	<option value="matt">matt
	<option value="bill">bill
	<option value="greg">greg
	<option value="bob">bob
	<option value="david">david
	<option value="ryan">ryan
</select>
 &nbsp; <input type="text" name="tbToFill" value="" onkeyup="autoComplete(this,this.form.options,'value',true)">
</form>

</body>
</html>
MODS: Do you think this thread should be moved to Clientside?

Posted: Wed Oct 26, 2005 9:51 pm
by Curtis782
This should help - thank you!

Does anyone know how I can have the description show up in the text field?

My current code:

Code: Select all

<html>
<head>
<!-- <script language="JavaScript" src="textfill.js"></script> -->
<script language="JavaScript">
<!--//
// ===================================================================
// Author: Matt Kruse <matt@mattkruse.com>
// WWW: http://www.mattkruse.com/
//
// NOTICE: You may use this code for any purpose, commercial or
// private, without any further permission from the author. You may
// remove this notice from your final code if you wish, however it is
// appreciated by the author if at least my web site address is kept.
//
// You may *NOT* re-distribute this code in any way except through its
// use. That means, you can include it in your product, or your web
// site, or any other form where the code is actually being used. You
// may not put the plain javascript up on your site for download or
// include it in your javascript libraries for download.
// If you wish to share this code with others, please just point them
// to the URL instead.
// Please DO NOT link directly to my .js files from your site. Copy
// the files to your server and use them there. Thank you.
// ===================================================================

// -------------------------------------------------------------------
// autoComplete (text_input, select_input, ["text"|"value"], [true|false])
//   Use this function when you have a SELECT box of values and a text
//   input box with a fill-in value. Often, onChange of the SELECT box
//   will fill in the selected value into the text input (working like
//   a Windows combo box). Using this function, typing into the text
//   box will auto-select the best match in the SELECT box and do
//   auto-complete in supported browsers.
//   Arguments:
//      field = text input field object
//      select = select list object containing valid values
//      property = either "text" or "value". This chooses which of the
//                 SELECT properties gets filled into the text box -
//                 the 'value' or 'text' of the selected option
//      forcematch = true or false. Set to 'true' to not allow any text
//                 in the text box that does not match an option. Only
//                 supported in IE (possible future Netscape).
// -------------------------------------------------------------------
function autoComplete (field, select, property, forcematch) {
   var found = false;
   for (var i = 0; i < select.options.length; i++) {
   if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
      found=true; break;
      }
   }
   if (found) { select.selectedIndex = i; }
   else { select.selectedIndex = -1; }
   if (field.createTextRange) {
      if (forcematch && !found) {
         field.value=field.value.substring(0,field.value.length-1);
         return;
         }
      var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
      if (cursorKeys.indexOf(event.keyCode+";") == -1) {
         var r1 = field.createTextRange();
         var oldValue = r1.text;
         var newValue = found ? select.options[i][property] : oldValue;
         if (newValue != field.value) {
            field.value = newValue;
            var rNew = field.createTextRange();
            rNew.moveStart('character', oldValue.length) ;
            rNew.select();
            }
         }
      }
   }
</script>
</head>
<body>
<form>

<?php

include ("common_vars.php");

mysql_connect("$DB_HOSTNAME1", "$DB_USERNAME1", "$DB_PASSWORD1") or die("Database error!");
mysql_select_db("$DB_NAME1");

?>
<select name="options" onChange="this.form.tbToFill.value=this.options[this.selectedIndex].value">
<?php
$query = "SELECT * FROM sunparts";
$result = mysql_query($query);
while ($item = mysql_fetch_array($result))
{
	$id = $item['id'];
	$partnum = $item['partnum'];
	$description = $item['description'];
	print "<option value='$id'>$partnum</option>\n";
}
print "</select>";

?>
<input type="text" name="tbToFill" value="" onkeyup="autoComplete(this,this.form.options,'value',true)">
</form>
</body>
</html>

Found solution to JS question...

Posted: Thu Oct 27, 2005 10:31 am
by Curtis782
Found a solution to my JavaScript question... this is the basic concept:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
 <title>Example</title>
</head>
<script language="JavaScript" type="text/javascript">
<!--
function showSelected()
{
 var selObj = document.getElementById('selSeaShells');
 var txtIndexObj = document.getElementById('txtIndex');
 var txtValueObj = document.getElementById('txtValue');
 var txtTextObj = document.getElementById('txtText');
 
 var selIndex = selObj.selectedIndex;
 txtIndexObj.value = selIndex;
 txtValueObj.value = selObj.options[selIndex].value;
 txtTextObj.value = selObj.options[selIndex].text;
}
//-->
</script>
 
<body>
<form name="Example_Form">
 <p> <select id="selSeaShells" onChange="showSelected();">
   <option value="val0">sea zero</option>
   <option value="val1">sea one</option>
   <option value="val2">sea two</option>
   <option value="val3">sea three</option>
   <option value="val4">sea four</option>
  </select>
 </p>
 <p> <input type="text" id="txtIndex" /> selectedIndex <br />
  <input type="text" id="txtValue" /> options[].value <br />
  <input type="text" id="txtText" /> options[].text <br />
 </p>
</form>
</body>
</html>