Form Select Box onChange function needed

@aranryanJun 02.2008

Ok, javascript beginner here trying to solve a perplexing problem. What I’m trying to accomplish is a drop down select box that has SKU numbers as the option values. The option that is selected should pass the SKU number to a javascript function that searches an array for that SKU and outputs the information contained in that array record to a div on the same page. I cannot create hidden divs for each array record and show/hide them because there will be a large volume of SKU records and to generate hundreds of hidden divs on a page would render it un-useable.

Here is an example of the array and nested objects

[CODE]<script type=”text/javascript” language=”javascript”>

var ScriptSKUs = new Array(); ScriptSKUs[0] = new Object(); ScriptSKUs[0][“sku”] = “BLK-30-7”; ScriptSKUs[0][“title”] = “Cool Knife 1”; ScriptSKUs[0][“msrp”] = 249.99;

ScriptSKUs[1] = new Object(); ScriptSKUs[1][“sku”] = “BLK-30-8”; ScriptSKUs[1][“title”] = “Cool Knife 2”; ScriptSKUs[1][“msrp”] = 249.99; ;

</script>[/CODE]

This is the form with a select box that displays the possible selections. The onChange event would trigger when a different option was chosen.

[CODE]<form name=”GetItem” method=”post” action=”#”> Item: <select name=”Items” id=”ItemSelect” class=”select” OnChange=”ShowValue();”> <option value=”” selected=”selected”>Choose an item</option> <option value=”BLK-30-7″>Cool Knife 1</option> <option value=”BLK-30-8″>Cool Knife 2</option> </select> </form>[/CODE]

This is the div I want to populate with the information from the array. The information would change when different items are selected from the select box. The “x” signifies the number of the array index.

[CODE] <div id=”itembuybox”>

ScriptSKUs[x][“sku”] ScriptSKUs[x][“title”] ScriptSKUs[x][“msrp”]

</div> [/CODE]

As you can see, I’m missing the function to accomplish this. I’m sure its not incredibly difficult but I can’t figure out the right syntax to loop through the array values for the onChange event. I’m more of a ColdFusion guy… Any help or pointers in the right direction would be extremely helpful. Thanks in advance!

-A!

to post a comment

JavaScript

12 Comments(s) _↴

@Logic_AliJun 02.2008 — #This is the function:

function showValue(box, arr, ident, outputID)
 {
 var dataString="";
 
 for(var i=0, found=false; i&lt;arr.length &amp;&amp; !found; i++)  <br/>
 if(box.value==arr[i][ident])
 {
 found=true;
 for(var x in arr[i])
 dataString += arr[i][x]+' ';  <br/>
 } 
 
 document.getElementById(outputID).firstChild.nodeValue=found ? dataString : "";     <br/>
 }

This is how you call it in the <select> tag:
onchange="showValue(this, ScriptSKUs, 'sku', 'itembuybox');"The 'itembuybox' div must not be marked-up empty, i.e. <div></div>, there should be at least a space or newline between the tags.

@aranryanauthorJun 03.2008 — #Thank you very much Logic Ali! I understand what you wrote to a point but I have a few questions that should clear that up.

for the first part of the function that reads

[CODE]showValue([COLOR="Red"]box[/COLOR], [COLOR="Red"]arr[/COLOR], [COLOR="Red"]ident[/COLOR], [COLOR="red"]outputID[/COLOR])[/CODE]

Should the sections in red should be changed to:

[CODE]function showValue([COLOR="red"]box[/COLOR], ScriptSKUs, sku, itembuybox)[/CODE]

and what is "box"? Is this the document object referring to the select box?

with those arguments specified, should the function read:

[CODE]for(var i=0, found=false; i<ScriptSKUs.length && !found; i++) 

 if(document.getElementById('ItemSelect').options.value==ScriptSKUs[i][ident])
 {
 found=true;
 for(var [COLOR="red"]x[/COLOR] in ScriptSKUs[i])
 dataString += ScriptSKUs[i][[COLOR="red"]x[/COLOR]]+' '; 

 }   [/CODE]

... and how do I specify the value for "x"?

Finally, I'm trying to style the output for display in the "itembuybox" DIV. How do I write the returned values into the DIV? Should I write them into separate variables and then do a document.write? I'm confused on how to output the results in a styled format without using JavaScript to write the whole DIV. Thanks a million for the help. I'm still pretty new to all this and I'm trying to learn as much as possible. ?

@Logic_AliJun 03.2008 — #
for the first part of the function that reads

showValue([COLOR=Red]box[/COLOR], [COLOR=Red]arr[/COLOR], [COLOR=Red]ident[/COLOR], [COLOR=red]outputID[/COLOR])
Should the sections in red should be changed to:

function showValue([COLOR=red]box[/COLOR], ScriptSKUs, sku, itembuybox)
and what is "box"? Is this the document object referring to the select box?

with those arguments specified, should the function read:

for(var i=0, found=false; i&lt;ScriptSKUs.length &amp;&amp; !found; i++)  <br/>
 if(document.getElementById('ItemSelect').options.value==ScriptSKUs[i][ident])
 {
 found=true;
 for(var [COLOR=red]x[/COLOR] in ScriptSKUs[i])
 dataString += ScriptSKUs[i][[COLOR=red]x[/COLOR]]+' ';  <br/>
 }

... and how do I specify the value for "x"?

[/code][/quote]You don't have to change anything, as long as the original names you specified have not changed, use it exactly as shown.

Finally, I'm trying to style the output for display in the "itembuybox" DIV. How do I write the returned values into the DIV? [/quote]The function already does that for you.

@aranryanauthorJun 03.2008 — #Hmm, now that you say that, it makes a little bit more sense but I'm getting this error when I run the page:

[COLOR="Red"]'document.getElementByID(...).firstChild' is null or not an object[/COLOR]

This a cut and paste of the page source:

[CODE]<body>
 
 <script type="text/javascript" language="javascript">
 var ScriptSKUs =  new Array();
 ScriptSKUs[0] = new Object();
 ScriptSKUs[0]["sku"] = "BLK-30-7";
 ScriptSKUs[0]["title"] = "M.O.D. Keating Hornet Automatic Folding Knife";
 ScriptSKUs[0]["industry"] = "TLE";
 ScriptSKUs[0]["nsn"] = "";
 ScriptSKUs[0]["inventory"] = "0";
 ScriptSKUs[0]["msrp"] = 249.99;
 ScriptSKUs[1] = new Object();
 ScriptSKUs[1]["sku"] = "BLK-30-8";
 ScriptSKUs[1]["title"] = "M.O.D. Keating Hornet Serrated Edge Automatic Folding Knife; Black Finish";
 ScriptSKUs[1]["industry"] = "";
 ScriptSKUs[1]["nsn"] = "";
 ScriptSKUs[1]["inventory"] = "0";
 ScriptSKUs[1]["msrp"] = 249.99;
 ;
 
 function showValue(box, arr, ident, outputID)
 {
 var dataString="";
 
 for(var i=0, found=false; i<arr.length && !found; i++) 

 if(box.value==arr[i][ident])
 {
 found=true;
 for(var x in arr[i])
 dataString += arr[i][x]+' '; 

 } 
 
 document.getElementById(outputID).firstChild.nodeValue=found ? dataString : ""; 

 }
 
 
 </script>
 
 
   <form name="GetItem" method="post" action="#">
   Item: <select name="Items" id="ItemSelect" class="select" onchange="showValue(this, ScriptSKUs, 'sku', 'itembuybox2');">
   <option value="" selected="selected">Choose an item</option>
 
   <option value="BLK-30-7">M.O.D. Keating Hornet Automatic Folding Knife</option>
 
   <option value="BLK-30-8">M.O.D. Keating Hornet Serrated Edge Automatic</option>
 
   </select>
   </form>
 
 
   <div id="itembuybox2">
 
   </div>
 
 </body>[/CODE]

Some fields in my array of objects may have null values. I can try to remove them if that is what is causing this error.

@Logic_AliJun 03.2008 — #Hmm, now that you say that, it makes a little bit more sense but I'm getting this error when I run the page:

[COLOR=Red]'document.getElementByID(...).firstChild' is null or not an object[/COLOR]
[/quote] Just put [I] [/I] between the div tags.

@aranryanauthorJun 03.2008 — #Freakin awesome! It works now but I have one final question. I see that it outputs the data like this:

[CODE]"BLK-30-8 M.O.D. Keating Hornet Serrated Edge Automatic Folding Knife; Black Finish 0 249.99"[/CODE]

How can I style the div to put the values where I want them to display such as in a table? And can I reference these values individually?

@JMRKERJun 04.2008 — #While not exactly any earthshattering changes,

here's one example of how the data can be accessed and displayed.

[code=php]
 <html>
 <head>
 <title>SKU database</title>
 
 <script type="text/javascript" language="javascript">
 // From: http://www.webdeveloper.com/forum/showthread.php?t=182985
 
 var ScriptSKUs =  new Array();
 
 ScriptSKUs[0] = new Object();
 ScriptSKUs[0]["sku"] = "BLK-30-7";
 ScriptSKUs[0]["title"] = "M.O.D. Keating Hornet Automatic Folding Knife";
 ScriptSKUs[0]["industry"] = "TLE";
 ScriptSKUs[0]["nsn"] = "";
 ScriptSKUs[0]["inventory"] = "0";
 ScriptSKUs[0]["msrp"] = 249.99;
 
 ScriptSKUs[1] = new Object();
 ScriptSKUs[1]["sku"] = "BLK-30-8";
 ScriptSKUs[1]["title"] = "M.O.D. Keating Hornet Serrated Edge Automatic Folding Knife; Black Finish";
 ScriptSKUs[1]["industry"] = "";
 ScriptSKUs[1]["nsn"] = "";
 ScriptSKUs[1]["inventory"] = "0";
 ScriptSKUs[1]["msrp"] = 249.99;
 
 function showValue(box, arr, ident, outputID) {
 var dataString="";
 
 for(var i=0, found=false; i<arr.length && !found; i++) 

 if(box.value==arr[i][ident]) {
 found=true;
 //      for(var x in arr[i]) dataString += arr[i][x]+' '; 

 var str = '<table border="1" width="80%"><tr>';
 for (var x in arr[i]) { str += '<td>'+arr[i][x]+'</td>'; }
 str += '</tr></table>';
 dataString = str;
 } 

 //  document.getElementById(outputID).firstChild.nodeValue=found ? dataString : ""; 

 document.getElementById(outputID).firstChild.nodeValue=found ? document.getElementById('itembuybox2').innerHTML=dataString : ""; 

 }
 </script>
 </head>
 <body>
 <form name="GetItem" method="post" action="#">
 Item: 
 <select name="Items" id="ItemSelect" class="select" onchange="showValue(this, ScriptSKUs, 'sku', 'itembuybox2');">
 <option value="" selected="selected">Choose an item</option>
 <option value="BLK-30-7">M.O.D. Keating Hornet Automatic Folding Knife</option>
 <option value="BLK-30-8">M.O.D. Keating Hornet Serrated Edge Automatic</option>
 </select>
 </form>
 <div id="itembuybox2">
 </div>
 
 </body>
 </html>
 [/code]

Original code is intact, just commented out.

@Logic Ali: Great little example of objects and arrays. Neat!

@JMRKERJun 04.2008 — #As an exercise, after reading a lot about JSON,

I thought this looked like a useful script to try to convert to this notation.

Slight change to the data format, but should be easy to create from a database.

Here is my feeble attempt. Again, thanks Logic Ali, for the stimulus.

JSON version

[code=php]
 <html>
 <head>
 <title>SKU database</title>
 
 <script type="text/javascript" language="javascript">
 // From: http://www.webdeveloper.com/forum/showthread.php?t=182985
 
 var ScriptSKUs =  new Array();
 
 ScriptSKUs[0] = {"sku":"BLK-30-7",
 "title":"M.O.D. Keating Hornet Automatic Folding Knife",
 "industry":"TLE",
 "nsn":"&nbsp;",
 "inventory":"0",
 "msrp":249.99};
 
 ScriptSKUs[1] = {"sku":"BLK-30-8",
 "title":"M.O.D. Keating Hornet Serrated Edge Automatic Folding Knife; Black Finish",
 "industry":"&nbsp;",
 "nsn":"&nbsp;",
 "inventory":"0",
 "msrp":249.99};
 
 function showValue(box, arr, ident, outputID) {
 var dataString="";
 
 for(var i=0, found=false; i<arr.length && !found; i++) 

 if(box.value==arr[i].sku) {
 found=true;
 var str = '<table border="1" width="80%"><tr>';
 str += '<td>'+arr[i].sku;
 str += '<td>'+arr[i].title;
 str += '<td>'+arr[i].industry;
 str += '<td>'+arr[i].nsn;
 str += '<td>'+arr[i].inventory;
 str += '<td>'+arr[i].msrp;
 str += '</tr></table>';
 dataString = str;
 } 

 document.getElementById(outputID).firstChild.nodeValue=found ? document.getElementById('itembuybox2').innerHTML=dataString : ""; 

 }
 </script>
 </head>
 <body>
 <form name="GetItem" method="post" action="#">
 Item: 
 <select name="Items" id="ItemSelect" class="select" onchange="showValue(this, ScriptSKUs, 'sku', 'itembuybox2');">
 <option value="" selected="selected">Choose an item</option>
 <option value="BLK-30-7">M.O.D. Keating Hornet Automatic Folding Knife</option>
 <option value="BLK-30-8">M.O.D. Keating Hornet Serrated Edge Automatic</option>
 </select>
 </form>
 
 <div id="itembuybox2">
 </div>
 
 </body>
 </html>
 [/code]

Probably some improvement can be made to the database structure using some more JSON techniques, but I'm still learning and this is pretty understandable to me.

@AngelDeLaNocheAug 03.2008 — #This is great, exactly what I was looking for.

After making a few changes to get it to work for my situation, and still having errors, I went back to the final code as posted by JMRKER. The code works, but when it changes the display in the div tag it also generates an error on the line:

[COLOR="Blue"]document.getElementById(outputID).firstChild.nodeValue=found ? document.getElementById('itembuybox2').innerHTML=dataString : "";[/COLOR]

[COLOR="red"]"Invalid Argument"[/COLOR]

I tested this doing a straight copy with no changes and saving it as an html file, even there I get the error. (OK, I did put the " " between the div tags) As I said, the code works even though it has an error, I just don't like errors.

@JMRKERAug 03.2008 — #Make sure the assignment to the value is on one line, not separate lines.

What browser are you using as I'm not getting that error? ?

@AngelDeLaNocheAug 03.2008 — #Using IE7. I have the test set up at http://www.angells.com/files/javaerror.html.

@JMRKERAug 04.2008 — #The error appears to be a warning (the yellow caution flag) in the lower left side of the browser.

I do not see any warnings or errors in FF. ?

Since the display is correct with the warning, you might try this:

[code=php]
 function showValue(box, arr, ident) {
 
 ...
 
 document.getElementById('itembuybox2').innerHTML=dataString; 

 }
 
 // and in the body:
 <select name="Items" id="ItemSelect" class="select" onchange="showValue(this, ScriptSKUs, 'sku');">
 
 [/code]

I don't get the warning in IE7 with this change. :rolleyes:

I'm not sure how important it is to include this original line

// document.getElementById(outputID).firstChild.nodeValue=found ? document.getElementById('itembuybox2').innerHTML=dataString : "";

You'll have to decide if the display is important enough to write to the page with this method with or without the caution.

Good Luck!

Also in #JavaScript _↴

Accessing arrays popup window Netscape Compatibility: Dynamically Adding elements

Success!

Help @aranryan spread the word by sharing this article on Twitter...

Tweet This

Form Select Box onChange function needed

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Form Select Box onChange function needed

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴