TR Forums

Trellot · Tue Mar 31, 2009 1:41 am

Got an issue referencing a selection list using JavaScript: This is class work, and, yes, I have posted this there too, but they're slow to respond sometimes, so thought I'd duplicate here. Looking for guidence and direction.

I'm writing a script that will take the user to the particular web page after selecting each item in the selection lists. My function selectLink(siteList) has the siteList as a parameter that references the different selection lists. I created a variable named sindex that "should" be equal to the index number of the selected option in siteList. Then I need to use the location.href property to open the Web site indicated in the value property of the selected option in siteList. I placed onchange event handlers to run this function at each select element using the "this" keyword as the object specified in the siteList paramter, which I've done. However, I'm having issues developing this function. Here's the page I'm working with below with my code inside:

<html>
<head>
<title>Monroe Public Library List of Government Sites</title>
<link href="mplstyles.css" rel="stylesheet" type="text/css" />                                  // I can post the css file "mplstyles" too if anyone needs, let me know.
<script type="text/javascript">

function selectLink(siteList){  
  sindex = document.main.selectedIndex.value; // getting null or not an object errors with this line
  location.href.sindex; // probably "going" to get something bad here too if it ever gets there, lol!
}
</script>
</head>

<body>
<p id="head">
   <img src="mpl.jpg" alt="Monroe Public Library" />
</p>

<div id="links">
   <span>Quick Links</span>
   <a href="#">Home Page</a>
   <a href="#">Online Catalog</a>
   <a href="#">Friends of MPL</a>
   <a href="#">New Books and Other Good Reading</a>
   <a href="#">Illinois Virtual Library</a>
   <a href="#">Internet Public Library</a>
   <a href="#">Services and Collection</a>
   <a href="#">Adult Programs</a>
   <a href="#">Teen Central</a>
   <a href="#">Children's Room</a>
</div>

<div id="main">
<h2>Government Sites on the Web</h2>

<p>Select a site from one of the drop-down lists below.</p>
<table>
   <tr><td>Executive Branch</td>
       <td><select name="executive" id="executive" onchange="selectLink(this)">                 //selection list #1
           <option value="#">Select a Web site</option>
           <option value="http://www.whitehouse.gov">The White House</option>
           <option value="http://www.usda.gov">Department of Agriculture</option>
           <option value="http://www.doc.gov">Department of Commerce</option>
           <option value="http://www.defenselink.mil">Department of Defense</option>
           <option value="http://www.ed.gov">Department of Education</option>
           <option value="http://www.energy.gov">Department of Energy</option>
           <option value="http://www.os.dhhs.gov">Department of Health and Human Services</option>
           <option value="http://www.whitehouse.gov/homeland">Department of Homeland Security</option>
           <option value="http://www.hud.gov">Department of Housing and Urban Development</option>
           <option value="http://www.doi.gov">Department of the Interior</option>
           <option value="http://www.usdoj.gov">Department of Justice</option>
           <option value="http://www.dol.gov">Department of Labor</option>
           <option value="http://www.state.gov">Department of State</option>
           <option value="http://www.ustreas.gov">Department of the Treasury</option>
           </select>
       </td>
   </tr>
   <tr><td>Legislative Branch</td>
       <td><select name="legislative" id="legislative" onchange="selectLink(this)">                //selection list #2
           <option value="#">Select a Web site</option>
           <option value="http://www.house.gov">House Web Site</option>
           <option value="http://www.house.gov/house/MemberWWW.shtml">Representatives' Web Sites</option>
           <option value="http://clerk.house.gov/">Clerk of the House</option>
           <option value="http://www.gpoaccess.gov/cdirectory/index.html">Congressional Directory</option>
           <option value="http://www.senate.gov">Senate Web Site</option>
           <option value="http://www.senate.gov/general/contact_information/senators_cfm.cfm">Senators' Web Sites</option>
           <option value="http://www.senate.gov/artandhistory/history/common/generic/Senate_Historical_Office.htm">Senate Historic Office</option>
           <option value="http://www.cq.com">Congressional Quarterly</option>
           <option value="http://www.loc.gov/">Library of Congress</option>
           <option value="http://www.gao.gov/">Government Accountability Office</option>
           <option value="http://www.cbo.gov/">Congressional Budget Office</option>
           <option value="http://www.gpoaccess.gov/">Government Printing Office</option>
           <option value="http://thomas.loc.gov/home/legbranch/otherleg.html#govpub">Government Records and Publications</option>
           </select>
       </td>
   </tr>
   <tr><td>Judicial Branch</td>
       <td><select name="judicial" id="judicial" onchange="selectLink(this)">                      //selection list #3
           <option value="#">Select a Web site</option>
           <option value="http://www.uscourts.gov">U.S. Courts</option>
           <option value="http://www.uscourts.gov/supremecourt.html">U.S. Supreme Court</option>
           <option value="http://www.uscourts.gov/courtsofappeals.html">U.S. Courts of Appeals</option>
           <option value="http://www.uscourts.gov/districtcourts.html">U.S. District Courts</option>
           </select>
       </td>
   </tr>
   <tr><td>State Governments</td>
       <td><select name="state" id="state" onchange="selectLink(this)">                                //selection list #4
           <option value="#">Select a Web site</option>
           <option value="http://www.statelocalgov.net/index.cfm">State and Local Government on the Net</option>
           <option value="http://www.loc.gov/global/state/al-gov.html">Alabama</option>
           <option value="http://www.loc.gov/global/state/ak-gov.html">Alaska</option>
           <option value="http://www.loc.gov/global/state/az-gov.html">Arizona</option>
           <option value="http://www.loc.gov/global/state/ar-gov.html">Arkansas</option>
           <option value="http://www.loc.gov/global/state/ca-gov.html">California</option>
           <option value="http://www.loc.gov/global/state/co-gov.html">Colorado</option>
           <option value="http://www.loc.gov/global/state/ct-gov.html">Connecticut</option>
           <option value="http://www.loc.gov/global/state/de-gov.html">Delaware</option>
           <option value="http://www.loc.gov/global/state/dc-gov.html">District of Columbia</option>
           <option value="http://www.loc.gov/global/state/fl-gov.html">Florida</option>
           <option value="http://www.loc.gov/global/state/ga-gov.html">Georgia</option>
           <option value="http://www.loc.gov/global/state/hi-gov.html">Hawaii</option>
           <option value="http://www.loc.gov/global/state/id-gov.html">Idaho</option>
           <option value="http://www.loc.gov/global/state/il-gov.html">Illinois</option>
           <option value="http://www.loc.gov/global/state/in-gov.html">Indiana</option>
           <option value="http://www.loc.gov/global/state/ia-gov.html">Iowa</option>
           <option value="http://www.loc.gov/global/state/ks-gov.html">Kansas</option>
           <option value="http://www.loc.gov/global/state/ky-gov.html">Kentucky</option>
           <option value="http://www.loc.gov/global/state/la-gov.html">Louisana</option>
           <option value="http://www.loc.gov/global/state/me-gov.html">Maine</option>
           <option value="http://www.loc.gov/global/state/md-gov.html">Maryland</option>
           <option value="http://www.loc.gov/global/state/ma-gov.html">Massachusetts</option>
           <option value="http://www.loc.gov/global/state/mi-gov.html">Michigan</option>
           <option value="http://www.loc.gov/global/state/mn-gov.html">Minnesota</option>
           <option value="http://www.loc.gov/global/state/ms-gov.html">Mississippi</option>
           <option value="http://www.loc.gov/global/state/mo-gov.html">Missouri</option>
           <option value="http://www.loc.gov/global/state/mn-gov.html">Montana</option>
           <option value="http://www.loc.gov/global/state/ne-gov.html">Nebraska</option>
           <option value="http://www.loc.gov/global/state/nv-gov.html">Nevada</option>
           <option value="http://www.loc.gov/global/state/nh-gov.html">New Hampshire</option>
           <option value="http://www.loc.gov/global/state/nj-gov.html">New Jersey</option>
           <option value="http://www.loc.gov/global/state/nm-gov.html">New Mexico</option>
           <option value="http://www.loc.gov/global/state/ny-gov.html">New York</option>
           <option value="http://www.loc.gov/global/state/nc-gov.html">North Carolina</option>
           <option value="http://www.loc.gov/global/state/nd-gov.html">North Dakota</option>
           <option value="http://www.loc.gov/global/state/oh-gov.html">Ohio</option>
           <option value="http://www.loc.gov/global/state/ok-gov.html">Oklahoma</option>
           <option value="http://www.loc.gov/global/state/or-gov.html">Oregon</option>
           <option value="http://www.loc.gov/global/state/pa-gov.html">Pennsylvania</option>
           <option value="http://www.loc.gov/global/state/ri-gov.html">Rhode Island</option>
           <option value="http://www.loc.gov/global/state/sc-gov.html">South Carolina</option>
           <option value="http://www.loc.gov/global/state/sd-gov.html">South Dakota</option>
           <option value="http://www.loc.gov/global/state/tn-gov.html">Tennessee</option>
           <option value="http://www.loc.gov/global/state/tx-gov.html">Texas</option>
           <option value="http://www.loc.gov/global/state/ut-gov.html">Utah</option>
           <option value="http://www.loc.gov/global/state/vt-gov.html">Vermont</option>
           <option value="http://www.loc.gov/global/state/va-gov.html">Virginia</option>
           <option value="http://www.loc.gov/global/state/wa-gov.html">Washington</option>
           <option value="http://www.loc.gov/global/state/wv-gov.html">West Virginia</option>
           <option value="http://www.loc.gov/global/state/wi-gov.html">Wisconsin</option>
           <option value="http://www.loc.gov/global/state/wy-gov.html">Wyoming</option>
           </select>
       </td>
   </tr>
</table>
<address>
   <b>Monroe Public Library</b>
   580 Main Street, Monroe IL 45812 &nbsp;&nbsp;54890
   <b>Phone</b>: (612) 555-0211
</address>
</div>

</body>
</html>

Any suggestions. If I need to post more information, let me know, and thanks!

Trellot

holophrastic · Tue Mar 31, 2009 2:08 am

You're lost when it comes to using javascript to reference elements on the page.

Your HTML line: <select name="executive" id="executive" onchange="selectLink(this)">
That's all perfect. But look what you have. You've made a <select> list, you've given it a name, you've given it and id, and you're having it call your selectLink() function, and you're passign a reference to the <select> as the parameter (this). All great.

Now, you've created your function selectLink(siteList){}.

That function needs to do three things.
1) it needs to figure out how to talk to the <select> on the page.
2) it needs to figure out the current state of the <select>.
3) it needs to navigate the browser to that <option>'s value.

Step 1).
There are four ways to get the <select> element.
- You can ask for it by name via its <form> tag (but you didn't use one, which is kind of illegal, but fine).
= document.{formName}.elements[{selectName}]
- You can ask for it by id.
= document.getElementById({selectId})
- You can accept the reference directly as a parameter. This is what you've chosen. You're passing "this" which actually _is_ the <select> object. You could have passed this.id or "executive" and then use the previous method. For your stuff, it doesn't matter, and your way is better.
= siteList.selectedIndex.value

Step 2).
There are two main ways to determine the current state of a <select> object.
- You can ask for it directly, this isn't supported by older browsers, and this method will quickly become unusable when you work with fancier objects, but it's fine for what you have.
= {selectObject}.value
- You can get the current <option> index, then lookup that option, then get that option's value.
= {selectObject}.selectedIndex
= {selectObject}.options[ {selectObject}.selectedIndex ].value

Step 3).
There are many ways to change the current page. Quite frankly, you've gone too far in that you didn't realize that you're trying to do more than is necessary.
- window.location = {newLocation};

So, all together now:

function selectLink(siteList)
{
var eSelectObject = siteList;
var iSelectedIndex = eSelectObject.selectedIndex;
var eSelectedOption = eSelectObject.options[ iSelectedIndex ];
var sOptionValue = eSelectedOption.value;
var sNewLocation = sOptionValue;
window.location = sNewLocation;
}

Or, compressed into what most programmers would do:

function selectLink( eSelectObject )
{
var sNewLocation = eSelectObject.options[ eSelectObject.selectedIndex ].value;
window.location = sNewLocation;
}

Or, all the way:

function selectLink( eSelectObject )
{
window.location = eSelectObject.options[ eSelectObject.selectedIndex ].value;
}

There is no difference to those three methods. It's just a matter of how many other thigns you'll be doing in this function before you want to optimize it. More lines is not only easier to read, but it's also easier to insert new functionality. Maybe your next assignment would be to popup a message saying what's happening, or confirming the action:

function selectLink(siteList)
{
var eSelectObject = siteList;
var iSelectedIndex = eSelectObject.selectedIndex;
var eSelectedOption = eSelectObject.options[ iSelectedIndex ];
var sOptionValue = eSelectedOption.value;
var sOptionText = eSelectedOption.text;
var sNewLocation = sOptionValue;

var bAnswer = confirm( "You have selected: \n\t" + sOptionText + ". \n\nYou are about to be redirected to the following URL:\n\t" + sOptionText );
if( bAnswer )
{
window.location = sNewLocation;
}
}

Trellot · Tue Mar 31, 2009 2:08 pm

I appreciate your help, holophrastic. Before my assignments "were" inside frames, like you mentioned this one should be, but then this one left the frame out and I WAS lost! But, with your post my understanding has been heightened. Thank you for taking the time out of your day.

Trellot

Trellot · Wed Apr 01, 2009 1:06 pm

If I'm referencing just text fields, how is this different from selection lists and such? I'm trying to create this function to display the cost of the quantity of items ordered by a customer and to update the total cost of the order. It then tests whether the customer has correctly entered an integer in one of the quantity fields. The price of each item is stored in the price1, price2, etc. fields, the qty in the qty1, qty2 fields and the cost in the cost1, cost2, etc. fields respectively. My calcCost(item) function is giving me headaches at this point. The other functions seem to be fine.

 function calcCost(item){
  var price = document.orders.elements[item].value;               //            I'm having trouble referencing these
  var qty = document.orders.elements[item].value;                 //                      three
  var cost = document.orders.elements[item].value;               //                                elements
  var reqty = /[0-9]/g;
  if (reqty.test(qty)){
    cost = (price*qty).toFixed(2);
    calcTotal();
  }else{
    {alert("Please enter a digit greater than or equal to 0");}
    qty = 0;
    document.orders.qty.focus();
    document.orders.qty.select();
    calcCost(item);
  }
}

and I'm trying to reference this:

<html>
<head>

<title>GPS-ware Order Form</title>
<link href="gps.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript">
function setDate(){
  document.orders.date.value = todayTxt();
  document.orders.qty1.focus();
  document.orders.qty1.select();
}
function productCosts(){
  var pc1 = parseFloat(document.orders.cost1.value);
  var pc2 = parseFloat(document.orders.cost2.value);
  var pc3 = parseFloat(document.orders.cost3.value);
  var pc4 = parseFloat(document.orders.cost4.value);
  var pc5 = parseFloat(document.orders.cost5.value);
  var pc6 = parseFloat(document.orders.cost6.value);
  return pc1+pc2+pc3+pc4+pc5+pc6;
}
function shipExpense(){
  var sindex = document.orders.shipping.selectedIndex;
  return parseFloat(document.orders.shipping.options[sindex].value);
}
function calcTotal(){
  var ordercost = productCosts();
  var ordertax = 0.05*(ordercost);
  var ordership = shipExpense();
  var ordertotal = ordercost+ordertax+ordership;
  document.orders.tax.value = ordertax.toFixed(2);
  document.orders.total.value = ordertotal.toFixed(2);
}
function calcShipping(){
  document.orders.shipcost.value = shipExpense();
  calcTotal();
}
function calcCost(item){
  var price = document.orders.elements[item.selectedIndex].value;
  var qty = document.orders.elements[item.selected].value;
  var cost = document.orders.elements[item.selected].value;
  var reqty = /[0-9]/g;
  if (reqty.test(qty)){
    cost = (price*qty).toFixed(2);
    calcTotal();
  }else{
    {alert("Please enter a digit greater than or equal to 0");}
    qty = 0;
    document.orders.qty.focus();
    document.orders.qty.select();
    calcCost(item);
  }
}
function validateForm(){
  if (document.orders.shipping.selectedIndex == 0)
    {alert("You must select a shipping option"); return false;}
    else return true;
}
</script>
</head>

<body onload="setDate()">
<form name="orders" id="orders" method="post" action="done.htm" onsubmit="return validateForm()"
      onreset="location.reload()">

<div id="links">
<a href="#" class="newgroup">Home Page</a>
<a href="#">Product Catalog</a>
<a href="#">Order Form</a>
<a href="#">Maps Online</a>
<a href="#">Contact Us</a>
<a href="#" class="newgroup">Countries</a>
<a href="#">States</a>
<a href="#">National Parks</a>
<a href="#">Hiking Trails</a>
<a href="#">Cities</a>
<a href="#">Astronomical</a>
<a href="#">Natural</a>
<a href="#" class="newgroup">GoMap 1.0</a>
<a href="#">Drive Planner 2.0</a>
<a href="#">Hiker 1.0</a>
<a href="#">G-Receiver I</a>
<a href="#">G-Receiver II</a>
<a href="#">G-Receiver III</a>
<a href="#" class="newgroup">Downloads</a>
<a href="#">Tech Support</a>
<a href="#">FAQs</a>
</div>

<div id="main">
<p id="logo"><img src="gpsware.jpg" alt="GPS-ware" /></p>
<h1>Order Form</h1>
<p id="datep">
   <input class="text" id="date" name="date" size="11" value="mm-dd-yyyy"
    tabindex="-1" readonly="readonly" />
</p>
<fieldset>
<legend>Enter the quantity of each order and press the Tab key</legend>
<table cellspacing="2">
<tr><th class="label">Product</th><th>Price</th>
    <th>Quantity</th><th>Cost</th></tr>
<tr>
   <td class="label">GoMap 1.0</td>
   <td><input name="price1" id="price1" size="8" value="19.95"
        tabindex="-1" readonly="readonly" />
   </td>
   <td><input name="qty1" id="qty1" size="8" value="0" onblur="calcCost(1)" />
   </td>
   <td><input name="cost1" id="cost1" size="12" value="0.00"
        tabindex="-1" readonly="readonly" />
   </td>
</tr>
<tr>
   <td class="label">Drive Planner 2.0</td>
   <td><input name="price2" id="price2" size="8" value="29.95"
        tabindex="-1" readonly="readonly" />
   </td>
   <td><input name="qty2" id="qty2" size="8" value="0" onblur="calcCost(2)" />
   </td>
   <td><input name="cost2" id="cost2" size="12" value="0.00"
        tabindex="-1" readonly="readonly" />
   </td>
</tr>
<tr>
   <td class="label">Hiker 1.0</td>
   <td><input name="price3" id="price3" size="8" value="29.95"
        tabindex="-1" readonly="readonly" /></td>
   <td><input name="qty3" id="qty3" size="8" value="0" onblur="calcCost(3)" />
   </td>
   <td><input name="cost3" id="cost3" size="12" value="0.00"
        tabindex="-1" readonly="readonly" />
   </td>
</tr>
<tr>
   <td class="label">G-Receiver I</td>
   <td><input name="price4" id="price4" size="8" value="149.50"
        tabindex="-1" readonly="readonly" /></td>
   <td><input name="qty4" id="qty4" size="8" value="0" onblur="calcCost(4)" />
   </td>
   <td><input name="cost4" id="cost4" size="12" value="0.00"
        tabindex="-1" readonly="readonly" />
   </td>
</tr>
<tr>
   <td class="label">G-Receiver II</td>
   <td><input name="price5" id="price5" size="8" value="199.50"
        tabindex="-1" readonly="readonly" /></td>
   <td><input name="qty5" id="qty5" size="8" value="0" onblur="calcCost(5)" />
   </td>
   <td><input name="cost5" id="cost5" size="12" value="0.00"
        tabindex="-1" readonly="readonly" />
   </td>
</tr>
<tr>
   <td class="label">G-Receiver III</td>
   <td><input name="price6" id="price6" size="8" value="249.50"
        tabindex="-1" readonly="readonly" /></td>
   <td><input name="qty6" id="qty6" size="8" value="0" onblur="calcCost(6)" />
   </td>
   <td><input name="cost6" id="cost6" size="12" value="0.00"
        tabindex="-1" readonly="readonly" />
   </td>
</tr>
<tr><td class="col4" colspan="4">&nbsp;</td></tr>
<tr>
   <td class="col3" colspan="3">Sales Tax (5%)</td>
   <td><input name="tax" id="tax" size="12" value="0.00"
        tabindex="-1" readonly="readonly" />
   </td>
</tr>
<tr>
   <td class="col3" colspan="3">
       <select id="shipping" name="shipping" onchange="calcShipping()">
          <option value="0">Choose a shipping option</option>
          <option value="4.95">Standard (4-6 business days) $4.95</option>
          <option value="8.95">Express (2 days) $8.95</option>
          <option value="12.95">Next Day (1 day) $12.95</option>
       </select>
   </td>
   <td><input name="shipcost" id="shipcost" value="0.00" size="12"
        tabindex="-1" readonly="readonly" />
   </td>
</tr>
<tr>
   <td class="col3" colspan="3">TOTAL</td>
   <td><input name="total" id="total" size="12" value="0.00"
        tabindex="-1" readonly="readonly" />
   </td>
</tr>
</table>
</fieldset>

<p id="pbuttons">
   <input type="reset" value="Reset" />
   <input type="submit" value="Submit Order" />
</p>

</form>
</body>
</html>

Trellot

mohdiqbal · Thu Sep 16, 2010 7:10 am

Thanks alot, I think I have to read more.

Thu Sep 16, 2010 9:03 am

I'm not a JavaScript coder so I can't help here, but I can tell you that "Please do my homework" requests typically aren't received too well. If you post your working so far and show what you are doing then you are far more likely to get some suggestions and hints as to what is wrong and how to fix it rather than a full answer.

UberGerbil · Thu Sep 16, 2010 9:53 am

This was a necro, NotFred. (Is mohdiqbal a drive-by link-dropper who failed, or was thwarted, or just a newbie looking for homework help? No idea.)

Thu Sep 16, 2010 10:06 am

There was basically a cut and paste of a homework question by mohdiqbal who I see has now edited their post. The homework question was JavaScript Selection List stuff from what I remember of it, so a legitimate continuation of the thread, just not quite in the right form.

TR Forums

JavaScript and Selection Lists

JavaScript and Selection Lists

Re: JavaScript and Selection Lists

Re: JavaScript and Selection Lists

Re: JavaScript and Selection Lists

Re: JavaScript and Selection Lists

Re: JavaScript and Selection Lists

Re: JavaScript and Selection Lists

Re: JavaScript and Selection Lists

Who is online