I try to fill a json array dynamically after everytime i press a button. My goal is later to safe this array in a txt file, but this is an other story and for that i found examples at W3C-Page.
this is my code so far:
enter
<html>
<body>
<table>
<tr>
<td><label>Subject: <input id="subject" type="text" /></label></td>
<td><label>Semester: <input id="semester" type="text" /></label></td>
<td><label>Name: <input id="name" type="text" /></label></td>
</tr>
<tr>
<td>
<label>Question: <label>
</td>
<td colspan="2">
<textarea id="question" style="width:512px;height:100px"></textarea>
</td>
</tr>
<tr>
<td>
<label>Answer 1: <label>
</td>
<td colspan="2">
<textarea id="Answer1" style="width:512px;height:100px"></textarea>
</td>
</tr>
<tr>
<td>
<label>Answer 2: <label>
</td>
<td colspan="2">
<textarea id="Answer2" style="width:512px;height:100px"></textarea>
</td>
</tr>
<tr>
<td>
<label>Answer 3: <label>
</td>
<td colspan="2">
<textarea id="Answer3" style="width:512px;height:100px"> </textarea>
</td>
</tr>
<tr>
<td>
<label>Answer 4: <label>
</td>
<td colspan="2">
<textarea id="Answer4" style="width:512px;height:100px"> </textarea>
</td>
</tr>
<tr>
<td></td>
<td><button onclick="saveInputInArray()">Save in Array</button></td>
<td></td>
</tr>
</table>
<script type='text/javascript'>
var quiz = {
question:[]
};
function saveInputInArray()
{
quiz.question.push({
"Subject" : document.getElementById("subject").value,
"Semester" : document.getElementById("semester").value,
"Name" : document.getElementById("name").value,
"Question" : document.getElementById("question").value,
"Answer1" : document.getElementById("Answer1").value,
"Answer2" : document.getElementById("Answer2").value,
"Answer3" : document.getElementById("Answer3").value,
"Answer4" : document.getElementById("Answer4").value
});
alert("Semester: " + quiz["question"]["semester"]);
}
</script>
</body>
</html>
Your code is good, just change this line:
alert("Semester: " + quiz["question"][0]['Semester']);
http://jsfiddle.net/ajpohzv3/
Considering this line of code that you wrote
alert("Semester: " + quiz["question"]["semester"]);
I'd do like such :
var quiz = {
question:[]
};
function saveInputInArray()
{
"subject semester name question Answer1 Answer2 Answer3 Answer4".split(" ").forEach(function(id){
quiz.question[id] = document.getElementById(id).value;
});
alert("Semester: " + quiz["question"]["semester"]);
}
Related
I have an input tag on table :
example :
<table border="1" id="datatable">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type='text' name="a[]" value="a1">
</td>
<td>
<input type='text' name="b[]" value="b1">
</td>
<td>
<input type='text' name="b[]" value="c1">
</td>
</tr>
<tr>
<td>
<input type='text' name="a[]" value="a2">
</td>
<td>
<input type='text' name="b[]" value="b2">
</td>
<td>
<input type='text' name="c[]" value="c2">
</td>
</tr>
</tbody>
I want to get value from input using javascript.
I have try :
var x = document.getElementById("datatable").rows[1].cells;
alert(x[1].innerHTML);
but the result is :
<input type='text' value="a">
please help. thank you
This is invalid html. Each input element should have a name attribute this is how the forms data is submitted. Then you could use value=document.querySelector("input[name='fred']").value;
Edit
Since you are using brackets (and therefore sending back array value with same name) you will need to use:
// create array for values
a_s_array = [];
// get input values
a_s = document.querySelectorAll("input[name='a[]']");
// loop through elements
for( var x=0; x<a_s.length; x++ ) {
// store input value into array
a_s_array.push( a_s[x].value );
}
Try this:-
var x = document.getElementById("datatable").rows[1].cells;
alert(x[0].children[0].value);
You can try this jquery code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<table border="1" id="datatable">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type='text' name="a[]" value="a1">
</td>
<td>
<input type='text' name="b[]" value="b1">
</td>
<td>
<input type='text' name="b[]" value="c1">
</td>
</tr>
<tr>
<td>
<input type='text' name="a[]" value="a2">
</td>
<td>
<input type='text' name="b[]" value="b2">
</td>
<td>
<input type='text' name="c[]" value="c2">
</td>
</tr>
</tbody>
<script>
$(document).ready(function(){
var td = $("#datatable").find('td');
$.each(td, function() {
alert($(this).find('input[type="text"]').val());
});
});
</script>
</body>
</html>
Trying to use javascript to calculate the total cost of an order using the quantity inputted through the form in html but the total is not displaying in the input box. Been messing around with it for a few days and yesterday was showing NaN but now the box stays completely blank. It's all within a singlular webpage as a pratical assessment for school and am just using the script tag.
See the js below
function calculatePrice()
{
//select data
var cappuccino = 3.00;
var espresso = 2.25;
var latte = 2.50;
var iced = 2.50;
var quantityCappuccino = document.getElementByID("quantityCappuccino").value;
var quantityEspresso = document.getElementByID("quantityEspresso").value;
var quantityLatte = document.getElementByID("quantityLatte").value;
var quantityIced = document.getElementByID("quantityIced").value;
//calculate final cost
var total = (quantityCappuccino * cappuccino) + (quantityEspresso * espresso) + (quantityLatte * latte) + (quantityIced * iced);
//print value to orderTotal
document.getElementById("orderTotal").value=total;
}
And here is the html for the form
<table>
<tr align="center">
<td><hr>
Hot Drinks<hr>
</td>
<td><hr>
Price<hr>
</td>
<td><hr>
Quantity<hr>
</td>
</tr>
<form name="calcuccino">
<tr>
<td>
Cappuccino
</td>
<td align="center">
$3.00
</td>
<td align="center">
<input type="number" id="quantityCappucino" name="quantityCappuccino" value="0">
</td>
</tr>
<tr>
<td>
Espresso
</td>
<td align="center">
$2.25
</td>
<td align="center">
<input type="number" id="quantityEspresso" name="quantityEspresso" value="0">
</td>
</tr>
<tr>
<td>
Latte
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityLatte" name="quantityLatte" value="0">
</td>
</tr>
<tr>
<td>
Iced
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityIced" name="quantityIced" value="0">
</td>
</tr>
<tr>
<td>
<hr>
<input type="checkbox" id="takeaway" name="takeaway">Takeaway?</option>
</td>
</tr>
<tr>
<td>
<br>
<button type="button" onclick="calculatePrice()">Submit Order</button>
</td>
<td>
</td>
<td>
<br>
<hr>
Order total: <b>$</b>
<input type="text" name="orderTotal" id="orderTotal" Size=6 readonly>
I found two errors:
(1) In your second four var statements, it's getElementById not getElementByID (don't all-cap "Id").
(2) Your first <input> tag has the id name misspelled. It should be quantityCappuccino (identical to the name attribute).
After fixing those, the code worked like a charm.
NOTE: It took me seconds to figure this out because the error console (In FireFox, strike the F12 key to open it) reported the problems. That console is your friend.
Try this !
$("#orderTotal").click(function () {
calculatePrice();
});
function calculatePrice()
{
//select data
var cappuccino = 3.00;
var espresso = 2.25;
var latte = 2.50;
var iced = 2.50;
var quantityCappuccino = $("#quantityCappucino").val();
var quantityEspresso = $("#quantityEspresso").val();
var quantityLatte = $("#quantityLatte").val();
var quantityIced = $("#quantityIced").val();
//calculate final cost
var total = (quantityCappuccino * cappuccino) + (quantityEspresso * espresso) + (quantityLatte * latte) + (quantityIced * iced);
console.log(total);
//print value to orderTotal
$("#orderTotal").val(total);
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table>
<tr align="center">
<td><hr>
Hot Drinks<hr>
</td>
<td><hr>
Price<hr>
</td>
<td><hr>
Quantity<hr>
</td>
</tr>
<form name="calcuccino">
<tr>
<td>
Cappuccino
</td>
<td align="center">
$3.00
</td>
<td align="center">
<input type="number" id="quantityCappucino" name="quantityCappuccino" value="0">
</td>
</tr>
<tr>
<td>
Espresso
</td>
<td align="center">
$2.25
</td>
<td align="center">
<input type="number" id="quantityEspresso" name="quantityEspresso" value="0">
</td>
</tr>
<tr>
<td>
Latte
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityLatte" name="quantityLatte" value="0">
</td>
</tr>
<tr>
<td>
Iced
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityIced" name="quantityIced" value="0">
</td>
</tr>
<tr>
<td>
<hr>
<input type="checkbox" id="takeaway" name="takeaway">Takeaway?</option>
</td>
</tr>
<tr>
<td>
<br>
<button type="button" onclick="calculatePrice()">Submit Order</button>
</td>
<td>
</td>
<td>
<br>
<hr>
Order total: <b>$</b>
<input type="text" name="orderTotal" id="orderTotal" Size=6 readonly>
</td>
</tr>
</form>
</table>
</body>
</html>
I want to show hide form fields on the basis of Select Value. e.g my form has 5 text fields and 1 select option field In those fields 4 fields are depended on select value. if i select cloth then cloth type and cloth value remains, lether type and lether value hide. but when i select Bags lether type and lether value remain else hide. i am trying some condition and ng-class="{'hideCheck': isHideCheck}" model but it behaving abnormally.
var app = angular.module('mainApp', []);
app.controller('appCont', function($scope) {
$scope.ProductTypeChnaged = function () {
$scope.ProductStatus = $scope.ProductValue;
if ($scope.AccountStatus == 'checking') {
$scope.isHideCheck = !$scope.isHideCheck;
} else if ($scope.AccountStatus == 'saving'){
$scope.isHideSave = !$scope.isHideSave;
}
};
});
.hideCheck{display:none}
.hideSave{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="appCont">
<p>Product box status: {{ ProductStatus }}</p>
<form name="frm">
<table>
<tr>
<td>Account Type :
</td>
<td>
<select name="ProductType" ng-model="ProductValue" ng-change="ProductTypeChnaged()">
<option value="checking">Checking</option>
<option value="saving">Saving</option>
</select><br />
</td>
</tr>
<tr>
<td>Amount :
</td>
<td>
<input type="text" name="amount" ng-model="amount" required>
</td>
</tr>
<tr ng-class="{'hideCheck': isHideCheck}">
<td>Lether value :
</td>
<td>
<input type="text" name="Lethervalue" ng-model="Lethervalue">
</td>
</tr>
<tr ng-class="{'hideCheck': isHideCheck}">
<td>Lether Type :
</td>
<td>
<input type="text" name="LetherType" ng-model="LetherType">
</td>
</tr>
<tr ng-class="{'hideSave': isHideSave}">
<td>Cloth Type :
</td>
<td>
<input type="text" name="ClothType" ng-model="ClothType">
</td>
</tr>
<tr ng-class="{'hideSave': isHideSave}">
<td>Cloth value :
</td>
<td>
<input type="text" name="Clothvalue" ng-model="Clothvalue">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button ng-click="addProduct()" ng-disabled="frm.$invalid">Add Account</button>
</td>
</tr>
</table>
</form>
</div>
use ng-hide to hide the element. ng-class is used to alter css.
I changed your code, it will hide element valus and type when option checking is selected, just an example for you, not implement your feather. you would like to read https://docs.angularjs.org/api/ng/directive/ngHide.
by the way , ng-repeat is a good way to do table things.
var app = angular.module('mainApp', []);
app.controller('appCont', function($scope) {
$scope.ProductTypeChnaged = function () {
$scope.ProductStatus = $scope.ProductValue;
if ($scope.AccountStatus == 'checking') {
$scope.isHideCheck = !$scope.isHideCheck;
} else if ($scope.AccountStatus == 'saving'){
$scope.isHideSave = !$scope.isHideSave;
}
};
});
.hideCheck{display:none}
.hideSave{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="appCont">
<p>Product box status: {{ ProductStatus }}</p>
<form name="frm">
<table>
<tr>
<td>Account Type :
</td>
<td>
<select name="ProductType" ng-model="ProductValue" ng-change="ProductTypeChnaged()">
<option value="checking">Checking</option>
<option value="saving">Saving</option>
</select><br />
</td>
</tr>
<tr>
<td>Amount :
</td>
<td>
<input type="text" name="amount" ng-model="amount" required>
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Lether value :
</td>
<td>
<input type="text" name="Lethervalue" ng-model="Lethervalue">
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Lether Type :
</td>
<td>
<input type="text" name="LetherType" ng-model="LetherType">
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Cloth Type :
</td>
<td>
<input type="text" name="ClothType" ng-model="ClothType">
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Cloth value :
</td>
<td>
<input type="text" name="Clothvalue" ng-model="Clothvalue">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button ng-click="addProduct()" ng-disabled="frm.$invalid">Add Account</button>
</td>
</tr>
</table>
</form>
</div>
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>
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
}