473,323 Members | 1,574 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,323 software developers and data experts.

Dynamic related combo boxes in table cells

I am developing a web page for order processing using Spring MVC.
In my JSP I have a table populated from the list of orders that are passed in the model (form backing object). Some fields there are filled and some are not.
User is suppose to complete mandatory fields and submit the form further.
I have it almost done except one thing where I can use some help.
One <td> contains 2 related combo boxes for shipping service selection:
First combo box contains options for carrier selection:USPS, FedEx, UPS, etc.
Second one should be populated with the type of service offered by the respective carrier: USPS - Express Mail, Priority Mail, Parcel Post; FedEx - Priority Overnight, Overnight, ..., Home Delivery, etc.
I found on the web a solution with the Javascript function that is called onChange event on the first combo box and generates options for the second.
My problem is that I have these two combo boxes in a table cell for several dozens of rows and I am not sure how can I address them properly.
I am specializing on the back end Java development but right now I need to deliver a complete web application. My front end skills are quite limited.
Help me please.
Feb 19 '07 #1
6 4869
iam_clint
1,208 Expert 1GB
To address the combo boxes you need to give them an ID
Example
[HTML]
<select id="shipping" onchange="setOptions(this.value);"><option value="blank">Select Shipping Type</option><option value="0">UPS<option value="1">FedEx</select>
[/HTML]

This will give this combo box an ID -- The second select box could be something like
[HTML]
<select id="service"></select>
[/HTML]

your javascript would then call upon these like this
Expand|Select|Wrap|Line Numbers
  1. <script>
  2. function setOptions(val) {
  3. var opt = document.getElementById("service")
  4. if (val == 0) {
  5. //this is if they selected ups
  6. clearlist();
  7. opt.options[0] = new Option('Express Mail','Express');
  8. opt.options[1] = new Option('Priority Mail','Priority');
  9. opt.options[2] = new Option('Parcel Post','Parcel');
  10. opt.options[3] = new Option('Priority Overnight','Overnight');
  11. //So on
  12. alert('The brown guys');
  13. }
  14. if (val == 1) {
  15. clearlist();
  16. //this is if they selected fedex
  17. opt.options[0] = new Option('Fedex1','Fedex1');
  18. opt.options[1] = new Option('Fedex2','Fedex2');
  19. alert('Fedex');
  20. }
  21. }
  22.  
  23. function clearlist() {
  24. var opt = document.getElementById("service").options;
  25. opt.length = 0;
  26. }
  27.  
  28. </script>
  29.  
please post with anything you don't understand about this so i can give you a further explanation.

don't forget in a form you need to name your select boxes so your serverside code can request it.


And welcome to thescripts!
Feb 19 '07 #2
Thank you,
I understand everything but unfortunately my case is little bit more complicated.
I wrote JSP that generates the javascript based on what you suggested but it involves a hash array of lists of objects, but cannot make it work. Here is the generated page source:
Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript" type="text/javascript">
  2.     var optmap = new Array();
  3.  
  4.         optmap["1"] = [
  5.  
  6.              new serviceOption("1", "FedEx First Overnight"),
  7.  
  8.              new serviceOption("2", "FedEx Priority Overnight"),
  9.  
  10.              new serviceOption("3", "FedEx Standard Overnight"),
  11.  
  12.              new serviceOption("4", "FedEx 2 Days"),
  13.  
  14.              new serviceOption("5", "FedEx Express Saver"),
  15.  
  16.              new serviceOption("6", "FedEx Home Delivery")
  17.              ];
  18.  
  19.         optmap["2"] = [
  20.  
  21.              new serviceOption("1", "UPS Next Day Air Early AM"),
  22.  
  23.              new serviceOption("2", "UPS Next Day Air"),
  24.  
  25.              new serviceOption("3", "UPS Next Day Air Saver"),
  26.  
  27.              new serviceOption("4", "UPS Second Day Air AM"),
  28.  
  29.              new serviceOption("5", "UPS Second Day Air"),
  30.  
  31.              new serviceOption("6", "UPS 3 Day Select")
  32.              ];
  33.  
  34.         optmap["3"] = [
  35.  
  36.              new serviceOption("2", "USPS Express Mail"),
  37.  
  38.              new serviceOption("4", "USPS Priority Mail"),
  39.  
  40.              new serviceOption("6", "USPS Parcel Post")
  41.              ];
  42.  
  43.         optmap["4"] = [
  44.  
  45.              new serviceOption("1", "DHL Next Day AM"),
  46.  
  47.              new serviceOption("2", "DHL Next Day Noon"),
  48.  
  49.              new serviceOption("3", "DHL Next Day 3 PM"),
  50.  
  51.              new serviceOption("4", "DHL Second Day"),
  52.  
  53.              new serviceOption("5", "DHL Ground"),
  54.  
  55.              new serviceOption("6", "DHL @ Home")
  56.              ];
  57.  
  58.     function serviceOption(priority, name)
  59.     {
  60.         this.priority = priority;
  61.         this.name = name;
  62.     }
  63.  
  64.     function refill(p, x)
  65.     {
  66.          document.write("came in with p = " + p + " and x = " + x);
  67.         var temp = document.getElementById(p);
  68.         clearopts(p);
  69.         var opts = optmap[x];
  70.         document.write(opts);
  71.         for(var i = 0; i < opts.length; i++)
  72.         {
  73.             var opt = opts[i];
  74.             temp.option[i] = new Option(opt.priority, opt.name);
  75.         }
  76.     }
  77.  
  78.     function clearopts(p)
  79.     {
  80.         var o = document.getElementById(p).options;
  81.         o.length = 0;
  82.     }
  83.  
  84. </script>
and here is the call:
Expand|Select|Wrap|Line Numbers
  1.                            <td>
  2.  
  3.                                 <select name="" 
  4.                                         onchange="refill('service_10088',this.value)">
  5.  
  6.                                         <option value="1">
  7.                                             FedEx
  8.                                         </option>
  9.  
  10.                                         <option value="2">
  11.                                             UPS
  12.                                         </option>
  13.  
  14.                                         <option value="3">
  15.                                             USPS
  16.                                         </option>
  17.  
  18.  
  19.                                         <option value="4">
  20.                                             DHL
  21.                                         </option>
  22.  
  23.                                 </select><select id="service_10088"></select>
  24.                                     <!-- this should be populated dynamicaly -->                               
  25.                             </td>
  26.  
Function refill get called with correct parameter values but variable opts inside the function is undefined and has no properties. The call to clearopts function occurs but errors out at this line:
Expand|Select|Wrap|Line Numbers
  1.        var o = document.getElementById(p).options;
Error console says that
Expand|Select|Wrap|Line Numbers
  1. Error: document.getElementById(p) has no properties
  2. Source File: http://localhost:8084/operations/operations.do
  3. Line: 3173
Can you please point out what is wrong with the code and how can I fix it?
Feb 26 '07 #3
acoder
16,027 Expert Mod 8TB
Your serviceOption function doesn't actually create the options. What's priority? Also, what is the this object that you are setting the name and priority for?

See this page for creating/manipulating options.
Feb 27 '07 #4
Your serviceOption function doesn't actually create the options. What's priority? Also, what is the this object that you are setting the name and priority for?

See this page for creating/manipulating options.
Why it does not create the object? I followed the book for using constructors.
Feb 27 '07 #5
acoder
16,027 Expert Mod 8TB
Why it does not create the object? I followed the book for using constructors.
OK, I had a closer look at your code and it does create options but in the refill function. serviceOptions is, of course, an object.

Ok, I've pinpointed the error. Use the following code for your refill function:
Expand|Select|Wrap|Line Numbers
  1. function refill(p, x)
  2. {
  3.     alert("came in with p = " + p + " and x = " + x);
  4.     var temp = document.getElementById(p);
  5.     clearopts(p);
  6.     var opts = optmap[x];
  7.     alert(opts);
  8.     for(var i = 0; i < opts.length; i++)
  9.     {
  10.        var opt = opts[i];
  11.        temp.options[i] = new Option(opt.priority, opt.name);
  12.     }
  13. }
  14.  
I've changed the document.write()s to alerts. The main problem with your code was temp.option should have been temp.options
Feb 27 '07 #6
I got it working, thank you for your help. Main problem was not in the script but in the configuration file for the JSP. JSP has been rendered twice. first time normally and second time without params, therefore, obliterating the array created in the first run.
Mar 6 '07 #7

Sign in to post your reply or Sign up for a free account.

Similar topics

3
by: vgrssrtrs | last post by:
<html> <head> <script language="JavaScript"> <!-- /* *** Multiple dynamic combo boxes *** by Mirko Elviro, 9 Mar 2005 *** ***Please do not remove this comment
2
by: H.c.m. Raaijmaakers | last post by:
Hi, The user can create a dynamic table. In every row are 5 input text boxes. If the second text box gets a onblur event then the value of the third box needs to become the value of the first...
6
by: Dave | last post by:
I want to put the information that the user selects in my combo boxes into a subform that lies on the same form as the combo boxes. Thanks for your help already, Dave
1
by: Dave | last post by:
Hello all, First I'd like to apologize...This post was meant to be put in my previous post, but I tried many times without success to reply within my previous post. Now here goes... I have a...
4
by: PM ArunKumar | last post by:
i have two dropdown list in my form where the values in the list of second drop down changes based on the value i select in the first dropdown.(very similar to country and states list), here after...
14
by: Heggr | last post by:
I have a page that when you click on a button it is supposed to add 5 more rows to an existing table. This functionality works but then we had to change one of the cells from using a Text box to...
0
by: MaryamSh | last post by:
Create Dynamic Dropdownlist Controls and related event -------------------------------------------------------------------------------- Hi, I am creating a Dynamic Search in my application. I...
1
by: semomaniz | last post by:
I have a form where i have created the form dynamically. First i manually added a panel control to the web page. Then i added another panel dynamically and inside this panel i created tables. I have...
6
by: shashi shekhar singh | last post by:
Respected Sir, I have to create multiple dynamic dropdownlist boxes and add items dynamically in <asp:table> server control but problem occurs , i.e. except of fist dropdown list no dropdownlist...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.