I'm trying to write a kiosk-style web app for iOS. I've created some buttons, which their only purpose is to insert some text into an input box, and everything seems fine. The problem is it's very very slow on the iPad itself.
Here's the function:
function addCode(key1){
var input1 = document.getElementById("productid");
input1.value += key1;
}
This is the input box:
<input type="text" id="productid" name="productid" placeholder="Product ID" readonly="true">
And here's how I call the function:
<input type="button" value="GEN" onclick="addCode('GEN');">
I'm not sure what's the problem here. As I've said, this works fine on my computer, but not on the iPad...
Thanks in Advance!
EDIT: Here's the complete code for the page
<!DOCTYPE HTML>
<html>
<head>
<title>Find a Product</title>
<link rel="stylesheet" href="fonts/mainfont.css">
<link rel="stylesheet" href="css/main.css">
<meta charset="UTF-8">
<script src="js/jquery.js"></script>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<script>
function addCode(key1){
var input1 = document.getElementById("productid");
input1.value += key1;
}
function emptyCode(){
var input2 = document.getElementById("productid");
input2.value = "";
}
</script>
</head>
<body oncontextmenu="return false">
<div align="center">
<div id="find">
<form action="find_product.php" method="POST">
<fieldset>
<p><input type="text" id="productid" name="productid" placeholder="Product ID" readonly="true"></p>
<br />
<table border="0" width="320px">
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="GEN" onclick="addCode('GEN');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="TST" onclick="addCode('TST');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="CSU" onclick="addCode('CSU');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="1" onclick="addCode('1');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="2" onclick="addCode('2');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="3" onclick="addCode('3');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="4" onclick="addCode('4');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="5" onclick="addCode('5');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="6" onclick="addCode('6');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="7" onclick="addCode('7');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="8" onclick="addCode('8');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="9" onclick="addCode('9');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="Clear" onclick="emptyCode();"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="0" onclick="addCode('0');"></p>
</td>
<td width="10px"></td>
<td width="100px">
</td>
</tr>
<!--EndRow-->
</table>
<br />
<p><input type="submit" value="Find"></p>
</fieldset>
</form>
</div>
<!-- end login -->
</div>
</body>
</html>
Related
Still a beginner in using jquery, and its about making a calculator, I know this is a big problem because it still has an error in it and there's a lot of code to be done to make it work, so what I need is adding, subtracting, multiplying, and dividing two numbers, and upon pressing the operator the first number that was pressed wouldn't be gone rather it will be gone and be change after pressing for the second number. It would also be a big thanks if y'all could help me my problem. Thanks a lot.
$(document).ready(function() {
var number = "";
$(".numeric").click(function() {
var num = $(this).val();
number = number + "" + num;
$("#container").val(number);
});
$(".clear").click(function() {
$("#container").val("");
number = "";
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Sample Calculator</title>
</head>
<body>
<input type="text" id="container" placeholder="" readOnly="readOnly" />
<br /><br />
<table border="1" cellpadding="3">
<tbody>
<tr>
<td>
<input type="button" class="numeric" value="7" />
</td>
<td>
<input type="button" class="numeric" value="8" />
</td>
<td>
<input type="button" class="numeric" value="9" />
</td>
<td>
<input type="button" class="operation" value="+" />
</td>
</tr>
<tr>
<td>
<input type="button" class="numeric" value="4" />
</td>
<td>
<input type="button" class="numeric" value="5" />
</td>
<td>
<input type="button" class="numeric" value="6" />
</td>
<td>
<input type="button" class="operation" value="-" />
</td>
</tr>
<tr>
<td>
<input type="button" class="numeric" value="1" />
</td>
<td>
<input type="button" class="numeric" value="2" />
</td>
<td>
<input type="button" class="numeric" value="3" />
</td>
<td>
<input type="button" class="operation" value="*" />
</td>
</tr>
<tr>
<td>
<input type="button" class="numeric" value="0" />
</td>
<td>
<input type="button" class="operation" value="=" />
</td>
<td>
<input type="button" class="operation" value="/" />
</td>
<td>
<input type="button" class="clear" value="Clear" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
I've been having problems getting my startform() function to work in my below HTML. I can get it to work in JFIDDLE by using the no wrap option. Any ideas why my function call is not working ive tested the JavaScript code separately and it works.
<html>
<title>Paycheck Calculator</title>
<link rel="stylesheet" href="pay.css" type="text/css">
<script src="midterm.js"></script>
</head>
<body>
<form name="paycheck">
<table width=80% align="center" >
<tr>
<td colspan="2"><h1>Your Paycheck Calculator</h1></td>
<!-- FORM DATE -->
<td colspan="2"><h2 align="right">Date: <input type="text" id ="formdate" class="date" name="formdate" size="10"></h2></td>
<td><input type="button" onclick="startform();" value="test"></input></td>
</tr>
<tr>
<td colspan="4">This Paycheck Calculator has been provided for you by your
Human Resources Department. You can use it to figure out your upcoming paycheck
or to see what impact the following changes would make on your paycheck: if
you change the number of dependents on you W-2, if you increase or decrease your
working hours, or if you get a raise. <br /></td>
</tr>
<tr>
<td colspan="4"><hr /></td>
</tr>
<tr>
<td class="smallcell"> </td>
<td class="bordrlft"><p class="rght">Hourly Pay Rate:<br /></p></td>
<td class="bordr"><input name="payrate"></td>
<td class="bigcell"> </td>
</tr>
<tr>
<td class="smallcell"> </td>
<td class="bordrlft"><p class="rght">Number of hours <br />
worked this week: </p></td>
<td class="bordr"><input name="hours" ></td>
<td class="bigcell"> </td>
</tr>
<!--<tr>
<td class="smallcell"> </td>
<td valign="top" class="bordrlft"><p class="rght">How many <br />
dependents do<br /> you claim on <br />your taxes?</p></td>
<td class="bordr">
<input type="radio" name="tax0" value="zero" onclick="tax_percent();">0<br />
<input type="radio" name="tax1" value="one" onclick="tax_percent();">1<br />
<input type="radio" name="tax2" value="two" onclick="tax_percent();">2<br />
<input type="radio" name="tax3" value="threefour" onclick="tax_percent();">3 - 4<br />
<input type="radio" name="tax4" value="fivesix" onclick="tax_percent();">5 - 6<br />
<input type="radio" name="tax5" value="oversix" onclick="tax_percent();">more than 6<br />
</td>
<td class="bigcell"> </td>
</tr>-->
<tr>
<td colspan="4"><hr /></td>
</tr>
<tr>
<td colspan="2" align="right" class="rght">Your tax rate is: </td>
<td colspan="2" ><input type="text" name="feedback" value="" size="20" ></td>
</tr>
<tr>
<td colspan="2" align="right" class="rght">Your paycheck will be: </td>
<td colspan="2"><input type="text" name="feedback3" value="" size="20"></td>
</tr>
<tr>
<td class="smallcell"> </td>
<td colspan="2" class="rght"><!-- here is the reset buttons-->
<p> <input type="reset" value="clear" name="reset"></p></td>
<td class="smallcell"> </td>
</tr>
</table>
</form>
</body>
</html>
--------JavaScript code------
function today(){
var date = new Date();
var day = date.getDate();
document.getElementById("formdate").value = day;
}
/*function to get date to load on startup */
function startform(){
today();
/*function to display calculated amount in 2-decimal format */
}
So ive narrowed it down to something in the JavaScript/HTML file causing me issues i think ive figured out the issue. I was able to strip out everything in my html and was able to get it to work. THis is also just a small part of a bigger project. Thanks For the input
New code
<html>
<head>
<title>Paycheck Calculator</title>
<link rel="stylesheet" href="pay.css" type="text/css">
<script src="midterm.js"></script>
</head>
<body>
<form name="paycheck" onclick="startform();">
<table width=80% align="center" >
<tr>
<td colspan="2"><h1>Your Paycheck Calculator</h1></td>
<!-- FORM DATE -->
<td colspan="2"><h2 align="right">Date: <input type="text" id ="formdate" class="date" name="formdate" size="10"></input></h2></td>
</tr>
</table>
</form>
</body>
</html>
Javascript
function today(){
var date = new Date();
var day = date.getDate();
document.getElementById("formdate").value = day;
}
/*function to get date to load on startup */
function startform(){
today();
/*function to display calculated amount in 2-decimal format */
}
/*function dollars(n) {
var dollar = n.toFixed(2);
return dollar;
}
*/
I have a working calculator on my website that is used for business expense savings estimation. currently the calculator auto-calculates in real time as the user inputs numbers. i would like the user to have to click a calculate button in order to see any results. could someone please help as i am having a hard time adjusting the code myself. here is the current code:
function calc() {
var cost = document.getElementById('phone').value * (.30) +
document.getElementById('energy').value * (.05) +
document.getElementById('cell').value * (.30) + document.getElementById('office').value * (.15) + document.getElementById('card').value *
(.35) + document.getElementById('waste').value * (.5) +
document.getElementById('payroll').value * (.5);
document.getElementById('cost').value = (cost * 12).toFixed(2);
}
<form name="form1" method="post" action="">
<table width="33%" align="center">
<tr>
<td valign="top" style="text-align: center"><strong>
Category</strong>
</td>
<td style="text-align: center"><strong>Monthly Expenses</strong>
</td>
</tr>
<tr>
<td valign="top"> </td>
<td> </td>
</tr>
<tr>
<td width="47%" valign="top">Telephone & Internet</td>
<td width="53%">
<input name="phone" id="phone" type="text" onchange="calc
()" />
</td>
</tr>
<tr>
<td valign="top">Energy</td>
<td>
<input name="energy" id="energy" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Cell Phone</td>
<td>
<input name="cell" id="cell" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Office Supplies</td>
<td>
<input name="office" id="office" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Merchant Card Fees</td>
<td>
<input name="card" id="card" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Waste Removal</td>
<td>
<input name="waste" id="waste" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td height="31" valign="top">3rd Party Payroll Fees</td>
<td>
<input name="payroll" id="payroll" type="text" onchange="calc
()" />
</td>
</tr>
<tr>
</tr>
</table>
<p> </p>
<div align="center">
<table width="33%" border="0">
<tr>
<td width="54%" height="31" valign="top"><strong>Estimated Annual
Savings:</strong>
</td>
<td width="46%">
<textarea name="cost" rows="1" id="cost" readonly style="overflow:hidden" input type="number"></textarea>
</td>
</tr>
Currently, your inputs are set up to call calc() whenever their onchange event is fired. This happens whenever the value is changed and the input is blurred (no longer in focus).
Remove the onchange="calc()" attribute on all your inputs, and add a button whever it makes sense to on your page with onclick="calc()":
<button onclick="calc()">Calculate</button>
Place button with Javascript event outside form
<button onclick="calc();">Calculate</button>
Delete all onchange="calc()" and add this html code to your page, that's it.
<button onclick="calc()">Calculate Expenses</button>
Remove the call to onchange="calc()" from all.
Put <div align="center">
<table width="33%" border="0">
<tr>
<td align="Center">
<input type="button" value="Click To Calculate" onclick="calc()" />
</td>
</tr>
</div>
From the following web page code:
(Don't read through it now - just skip past it and take a look at what I'm needing to grab onto from the following code then you can come back to this code.)
<table class="shop_table cart" cellspacing="0">
<thead>
<tr>
<th class="product-remove"> </th>
<th class="product-thumbnail"> </th>
<th class="product-name">Product</th>
<th class="product-price">Price</th>
<th class="product-quantity">Quantity</th>
<th class="product-subtotal">Total</th>
</tr>
</thead>
<tbody>
<tr class="cart_item">
<td class="product-remove">
×
</td>
<td class="product-thumbnail">
<a href="http://dev123.MyDomain.com/product/5-htp-power/">
<img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/2806-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="2806" />
</a>
</td>
<td class="product-name">
5-HTP Power
</td>
<td class="product-price">
<span class="amount">$19.55</span>
</td>
<td class="product-quantity">
<div class="quantity">
<input type="number" step="1" name="cart[02e74f10e0327ad868d138f2b4fdd6f0][qty]" value="35" title="Qty" class="input-text qty text" size="4" />
</div>
</td>
<td class="product-subtotal">
<span class="amount">$97.75</span>
</td>
</tr>
<tr class="cart_item">
<td class="product-remove">
×
</td>
<td class="product-thumbnail">
<a href="http://dev123.MyDomain.com/product/5-w/">
<img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/1120-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="1120" />
</a>
</td>
<td class="product-name">
5-W
</td>
<td class="product-price">
<span class="amount">$19.35</span>
</td>
<td class="product-quantity">
<div class="quantity">
<input type="number" step="1" name="cart[6ea9ab1baa0efb9e19094440c317e21b][qty]" value="104" title="Qty" class="input-text qty text" size="4" />
</div>
</td>
<td class="product-subtotal">
<span class="amount">$77.40</span>
</td>
</tr>
<tr class="cart_item">
<td class="product-remove">
×
</td>
<td class="product-thumbnail">
<a href="http://dev123.MyDomain.com/product/7-keto/">
<img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/2922-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="2922" />
</a>
</td>
<td class="product-name">
7-Keto
</td>
<td class="product-price">
<span class="amount">$38.25</span>
</td>
<td class="product-quantity">
<div class="quantity">
<input type="number" step="1" name="cart[c16a5320fa475530d9583c34fd356ef5][qty]" value="3" title="Qty" class="input-text qty text" size="4" />
</div>
</td>
<td class="product-subtotal">
<span class="amount">$114.75</span>
</td>
</tr>
<tr class="cart_item">
<td class="product-remove">
×
</td>
<td class="product-thumbnail">
<a href="http://dev123.MyDomain.com/product/acidophilus/">
<img width="90" height="90" src="http://dev123.MyDomain.com/wp-content/uploads/2014/04/product/1666-90x90.jpg" class="attachment-shop_thumbnail wp-post-image" alt="1666" />
</a>
</td>
<td class="product-name">
Acidophilus
</td>
<td class="product-price">
<span class="amount">$15.95</span>
</td>
<td class="product-quantity">
<div class="quantity">
<input type="number" step="1" name="cart[182be0c5cdcd5072bb1864cdee4d3d6e][qty]" value="22" title="Qty" class="input-text qty text" size="4" />
</div>
</td>
<td class="product-subtotal">
<span class="amount">$31.90</span>
</td>
</tr>
<tr>
<td colspan="6" class="actions">
<div class="coupon">
<label for="coupon_code">Coupon:</label>
<input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="Coupon code" />
<input type="submit" class="button" name="apply_coupon" value="Apply Coupon" />
</div>
I need to grab onto the following items:
the 2806 part of alt="2806"
the 35 part of value="35" title="Qty"
the 1120 part of alt="1120"
the 104 part of value="104" title="Qty"
the 2922 part of alt="2922"
the 3 part of value="3" title="Qty"
the 1666 part of alt="1666"
the 22 part of value="22" title="Qty"
I have looked at this page:
Javascript: How to loop through ALL DOM elements on a page?
and this page:
http://www.w3schools.com/js/js_htmldom_nodelist.asp
and I'm in a little bit over my head.
What I need to have is some javascript code that will result in... a variable that contains the following:
<input type="hidden" name="prodnum" value="2806" />
<input type="hidden" name="prodqty" value="35" />
<input type="hidden" name="prodnum" value="1120" />
<input type="hidden" name="prodqty" value="104" />
<input type="hidden" name="prodnum" value="2922" />
<input type="hidden" name="prodqty" value="3" />
<input type="hidden" name="prodnum" value="1666" />
<input type="hidden" name="prodqty" value="22" />
I'm going to continue to struggle with this to see if I can figure it out myself but the odds are not in my favor.
Thanks for any help you can provide!
You could do it using a three-dimensional javascript object:
jsFiddle Demo
var stObj = {};
$('#mybutt').click(function(){
var cnt = 0;
$('.shop_table tbody tr:not(:last-child)').each(function(){
//alert( this.className );
cnt++;
stObj[cnt] = {};
$this = $(this);
var thImg = $this.find('.product-thumbnail a img').attr('alt');
//alert(thImg);
var prQty = $this.find('.product-quantity div input').val();
//alert(prQty);
stObj[cnt]['thImg'] = thImg;
stObj[cnt]['prQty'] = prQty;
});
alert( JSON.stringify(stObj) );
});
Notes:
(1) Object stObj is defined globally (i.e. outside - above - the functions in which it is used)
(2) jQuery selector tr:not(:last-child) prevents trying to find alt and value in last table row
(3) In jsFiddle, the #tst div is immediately hidden by code. If visible, it just shows the code is broken without having to push any buttons.
References:
Multi-dimensional associative arrays in javascript
javascript or jquery: Looping a multidimensional object
I am very new to javascript, and took a chunk of code and modified it for my own use. It works fine in Firefox (*NIX and Windows). In IE8, the text field validation works fine, but the select drop downs return as invalid even when an option is selected.
<!DOCTYPE html>
<head>
<meta charset="utf-8 />
<link href="/FNMOC/CSS/styles.main.css" rel="stylesheet" type="text/css">
<title>Fleet Numerical Meteorology and Oceanography Center</title>
<link rel="icon" href="favicon.ico">
<script type="text/javascript">
var RequiredFieldIDs =
'FirstName,LastName,Affiliation,Command,Email,Phone,METOC,Classification,Purpose,Priority,Due,NELat,SWLat,NELong,SWLong';
function CheckRequiredFields()
{
RequiredFieldIDs = RequiredFieldIDs.replace(/[, ]+/,",");
var idList = RequiredFieldIDs.split(",");
var Empties = new Array();
{
var s = TrimFormFieldValues(document.getElementbyId(idList[i]).value);
if (s.length<1) { Empties.push(idList[i]); }
}
if (! Empties.length) { return true; }
var ess = new String ("\n\nThe Following are required:\n");
for (var i=0; i<Empties.length; i++) { ess += '\n\t' + Empties[i]; }
alert (ess);
return false;
}
function TrimFormFieldValues(s)
{
s = s.replace (/^\s*/,"");
s = s.replace (/\s*$/,"");
}
</script>
<script type="text/javascript">
function ShowMenu()
{
var form = document.climo;
var field = form.Classification;
var select = field.selectedIndex;
{
if(select == 4) document.getElementById('tableHide').style.display = '';
else document.getElementById('tableHide').style.display = 'none';
}
}
</script>
<script type="text/javascript">
function ShowMenu2()
{
var form = document.climo;
var field = form.Affiliation;
var select = field.selectedIndex;
{
if(select == 1)document.getElementById('tableHide2').style.display = "";
else document.getElementById('tableHide2').style.display = 'none';
}
}
</script>
</head>
<body>
<div class="wrapper">
<div class="banner">
<iframe src="/FNMOC/banner.html" width="100%" height="30" frameBorder="0" scrolling="no">
</iframe>
</div>
<div class="classification">
<h2>THIS PAGE UNCLASSIFIED</h2>
</div>
<div class="header">
<a href="/FNMOC/index.html">
<img class="floatright" src="/FNMOC/IMAGES/fnmoc.png" />
</a>
<br />
<h3>
We produce and deliver weather, ocean and climate information for Fleet Safety, Warfighting Effectiveness and National Defense.
<br />
<br />
Atmospheric and Oceanographic Prediction enabling Fleet Safety and Decision Superiority
</h3>
<br />
<br />
</div>
<div class="left_col">
<iframe src="/FNMOC/menu.html" width="100%" height="800" frameBorder="0" scrolling="no">
</iframe>
</div>
<div class="main_col">
<center>
<h2>FORM UNCLASSIFIED UNTIL FILLED OUT</h2>
<h2>Climatology Support Request</h2>
</center>
<form name=climo action="/CGI/mail-form-climo.cgi" method="post" onsubmit="return CheckRequiredFields();">
<table border="0" cellpadding="5" width="100%">
<tr>
<td width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
<center>
Contact Information
</h2>
</b>
<i>
* indicates required field
</i>
</center>
<hr>
</td>
</tr>
<tr>
<td width="30%">
<b>* First Name:</b>
</td>
<td width="70%">
<input type="text" id="FirstName" size="20" maxlength="250" name="1. First Name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Last Name:</b>
</td>
<td width="70%">
<input type="text" id="LastName" size="30" maxlength="250" name="2. Last Name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Affiliation:</b>
</td>
<td width="70%">
<select id="Affiliation" name="3. Affiliation:" onchange="!!(ShowMenu2());" size="1">
<option></option>
<option>MIL</option>
<option>CIV</option>
<option>CTR></option>
</select>
</td>
</tr>
<tr>
<td width="30%">
</td>
<td width="70%">
<table style="display:none" id="tableHide2">
<tr>
<td>
Branch of Service:
<select name="4. Branch of Service:" size="1">
<option></option>
<option>USN</option>
<option>USAF</option>
<option>USA</option>
<option>USMC</option>
<option>USCG</option>
</select>
</td>
</tr>
<tr>
<td>
Rank:
<input type="text" id="Rank" size="10" maxlength="10" name="5. Rank:">
</input>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30%">
<b>
* Command/Organization:
</b>
</td>
<td width="70%">
<input="text" id="Command" size="30" maxlength="250" name="6. Command/Organization:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Email:</b>
</td>
<td width="70%">
<input type="text" id="Email" size="30" maxlength="250" name="7. Email:"
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Phone Number:</b>
</td>
<td width="70%">
<input type="text" id="Phone" size="30" maxlength="30" name="8. Phone number:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>DSN:</b>
</td>
<td width="70%">
<input type="text" size="13" maxlength="13" name="9. DSN:">
</input>
</td>
</tr>
<tr>
<td width="30%>
<b>* Are you meterologist or Oceanographer personnel?</b>
</td>
<td width="70%">
<select id="METOC" name="11. METOC:">
<option></option>
<option>YES</option>
<option>NO</option>
</select>
</td>
</tr>
<tr>
<tr width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
Security Classification
</h2>
</b>
<center>
<i>
* indicates required field
</i>
</center>
<hr>
<i>
If classified, provide derivative and declassification info please.
</i>
<hr>
<br />
</td>
</tr>
<tr>
<td width="30%">
<b>* Classification of this request:</b>
</td>
<td width="70%">
<select id="Classification" name="12. Classification:" onchange="!!(ShowMenu()); size="1">
<option></option>
<option>UNCLASSIFIED</option>
<option>CONFIDENTIAL</option>
<option>SECRET</option>
<option>TOP SECRET</option>
</select>
</td>
</tr>
<tr>
<td width="30%">
</td>
<td width="70">
<table style="display:none" id="tableHide">
<tr>
<td>
<input type=checkbox name="12a. Caveat:" value="SI">SI</input>
<input type=checkbox name="12b. Caveat:" value="TK">TK</input>
<input type=checkbox name="12c. Caveat:" value="NOFORN">NOFORN</input>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30%">
<b>Classified By:</b>
</td>
<td width="70%">
<input type="text" size="40" maxlength="250" name="13. Classified By:">
</input>
</td>
</tr>
<td width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
Request Information
</h2>
</b>
<i>
* Indicates Required Field
</i>
<hr>
</td>
</tr>
<tr>
<td width="100%" colspan="2" align="center">
<b>
MISSION INFORMATION
</b>
<hr>
<br />
</td>
</tr>
<tr>
<td width="30%">
<b>* Mission Support Catagory:</b>
</td>
<td width="70%">
<select id=Purpose name="17. Purpose:" size="1">
<option></option>
<option>Combat/Operation</option>
<option>Contingency</option>
<option>Exercise</option>
<option>Training</option>
<option>Experiment</option>
<option>Research</option>
</select>
<b>Mission Name:</b>
<input type="text" size="20" maxlength="250" name="18. Purpose name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Priority</b>
</td>
<td width="70%">
<select id="Priority" name="19. Priority:" size="1">
<option></option>
<option>LOW</option>
<option>MED</option>
<option>HIGH</option>
<option>URGENT</option>
</select>
</td>
</tr>
<tr>
<td width="30%">
<b>* Due date:</b>
</td>
<td width="70%">
<input type="text" size="10" maxlength="10" id="Due" name="20. Date due:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Location</b>
<br />
provide NE/SW corner latitude and longitude in decimal format of each mesh you will use for applicataion/forcasting.
<br />
Northern hemisphere latitude is + and Southern hemisphere latitude is -, Eastern longitude from GMT is + and Western longitude from GMT is -.
</td>
<td width="70%">
<table>
<tr>
<td width="50%" aligh="right">
NE Latitude: <input type="text" id=NELat size="10" maxlength="250" name="22. NE Lat:">
</input>
<br />
SW Latitude: <input type="text" id=SWLat size="10" maxlength="250" name="23. SW Lat:">
</input>
</td>
<td width="50%" align="right">
NE Longitude:  <input type="text" id=NELong size="10" maxlength="250" name="24. NE Long:">
</input>
<br />
SW Longitude: <input type="text" id=SWLong size="10" maxlength="250" name="25. SW Long:">
</input>
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr>
<center>
<input type="submit" name="Submit" value="Submit">
</input>
<input type="reset" name="Reset" value="Reset">
</input>
</center>
</form>
</div>
<br class="cleaner" />
<div class="classification">
<h2>THIS PAGE UNCLASSIFIED</h2>
</div>
<div class="banner">
<iframe src="/FNMOC/banner.html" width="100%" height="30" frameBorder="0" scrolling="no">
</iframe>
</div>
</div>
</body>
</html>
The other select fields have the same code, just different names/values. No selection validates in IE8. Your help greatly appreciated.
edited to add all code as per request
The way you validate select box is not correct. You can get value of the selected option like select.value and it will work in Forefox and Chrome. However the proper way to do it so that IE could also understand it, is using the value of selected option:
var el = document.getElementbyId(idList[i]);
var s = TrimFormFieldValues(el.options[el.selectedIndex].value);
If you have different type of controls in your form, you can check if the current one is selectbox with this check:
if (idList[i].tagName == 'SELECT') {
// this is select, get the value using el.options[el.selectedIndex].value
}