I dynamically created a textbox on the event of click on a certain button and now I want to retrieve the text from the textbox to display on another php form page.
Following is my html code where I assign the name "c1", "c2" and "c3" to the dynamically created textboxes.
<script>
$(document).ready(function(){
$("#t11, #t12").click(function(){
var div = $("<div />");
div.html(GenerateTextbox("","c1"));
$("#TextBoxContainer").append(div);
var div = $("<div />");
div.html(GenerateTextbox("","c2"));
$("#TextBoxContainer").append(div);
var div = $("<div />");
div.html(GenerateTextbox("","c3"));
$("#TextBoxContainer").append(div);
});
});
function GenerateTextbox(value,name1) {
console.log(name1);
return '<input name = "'+ name1 + '" type="text" value = "' + value + '" /> ';}
</script>
My php code in another document:
<td>
<input type="<?php echo $_POST["t1"];?>"> <?php echo $_POST["c1"];?>
<input type="<?php echo $_POST["t1"];?>"><?php echo $_POST["c2"];?>
<input type="<?php echo $_POST["t1"];?>"><?php echo $_POST["c3"];?>
</td>
When the second php page is directed to, it say that c1, c2 and c3 are undefined indices. Everything else works fine but I cannot get this information from one page to the other.
Please help!
Full form html:
<table align="center">
<form action="output.php" method="post">
<tr>
<td>
Background color of page:<br/>
</td>
<td>
<input id="ex" type="color" name="bgcol" id="nbg">
</td>
</tr>
<tr>
<td>
Name of form:
</td>
<td>
<input type="text" name="titleform" id="titleform">
</td>
</tr>
<tr>
<td>
Font size:
</td>
<td>
<input type="text" name="fontsize" id="fontsz">
</td>
</tr>
<tr>
<td>
Font:
</td>
<td>
<input type="text" name="fontt" id="nbg">
</td>
</tr>
<tr>
<td>
Font color:
</td>
<td>
<input id="ex"type="color" name="fontt" id="nbg">
</td>
</tr>
<tr>
<td>
Background color of form:<br/>
</td>
<td>
<input id="ex" type="color" name="bgcolor" id="nbg" value="#FFFFFF">
</td>
</tr>
<tr>
<td>
Input #1:
</td>
<td>
<input type="text" name="input1" id="nbg">
</td>
<td>
Type:
</td>
<td>
<select name="t1" id="t1">
<option>text</option>
<option id="t11">radio</option>
<option id="t12">checkbox</option>
</select>
</td>
<td>
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
</td>
<tr>
<td>
Input #2:
</td>
<td>
<input type="text" name="input2" id="nbg">
</td>
<td>
Type:
</td>
<td>
<select name="t2">
<option>text</option>
<option id="t21">radio</option>
<option id="t22">checkbox</option>
</select>
</td>
<td>
<div id="TextBoxContainer2">
<!--Textboxes will be added here -->
</div>
</td>
</tr>
<tr>
<td>
Input #3:
</td>
<td>
<input type="text" name="input3" id="nbg">
</td>
<td>
Type:
</td>
<td>
<select name="t2">
<option>text</option>
<option id="t31">radio</option>
<option id="t32">checkbox</option>
</select>
</td>
<td>
<div id="TextBoxContainer3">
<!--Textboxes will be added here -->
</div>
</td>
</tr>
<tr>
<td>
Input #4:
</td>
<td>
<input type="text" name="input4" id="nbg">
</td>
<td>
Type:
</td>
<td>
<select name="t4">
<option>text</option>
<option id="t41">radio</option>
<option id="t42">checkbox</option>
</select>
</td>
<td>
<div id="TextBoxContainer4">
<!--Textboxes will be added here -->
</div>
</td>
</tr>
<tr>
<td>
Input #5:
</td>
<td>
<input type="text" name="input5" id="nbg">
</td>
<td>
Type:
</td>
<td>
<select name="t5">
<option>text</option>
<option id="t51">radio</option>
<option id="t52">checkbox</option>
</select>
</td>
<td>
<div id="TextBoxContainer5">
<!--Textboxes will be added here -->
</div>
</td>
</tr>
<tr>
<td>
<button type="submit" name="Create_form" id="form2" value="submit" onclick="return check()"> >Submit
</button>
</td>
</tr>
</form>
</table>
You need to attach your div to the DOM, and particularly as a child element of your form. Otherwise, the <input>s never get POSTed.
$("#myForm").append(div);
Also, since you used jQuery to manipulate your div and form in the first place, I would advise you continue with jQuery to build the inner inputs, rather than just provide inner HTML in your GenerateTextbox function.
I need a little help creating a dynamic array of JSON object from the values of different elements. Example is elements below. I have other elements to create the values required for JSON. I didnt want to post 3 lots of same code. So belwo x3
<tr>
<td style="width: 5%"><label>Title:</label></td>
<td><input type="text" class="leds" name="title" style="width:150px"value=""></td><tr>
<td style="width: 5%"><label>Message:</label></td>
<td><input type="text" class="leds" name="message" style="width: 150px" value=""></td><tr>
<td style="width: 5%"><label>IP address:</label></td>
<td><input type="text" class="leds" name="ip_address" style="width:150px" value=""></td>
<td style="width: 5%"><label>Message Colour:</label></td>
<td><select type="text" class="leds" name="led_colour" style="width:150px">
<option value=""></option>
<option value="255,0,0,0">Red</option>
<option value="0,255,0,0">Green</option>
<option value="0,0,255,0">Blue</option>
<option value="255,165,0,0">Orange</option>
<option value="255,255,0,0">Yellow</option>
<option value="255,255,255,0">White</option>
<option value="128,0,128,0">Purple</option>
<option value="255,0,255,0">Fuchsia</option>
<option value="192,192,192,0">Silver</option>
</td>
</tr>
I can get the values with the following
$.each($('.leds'), function(index, obj) {
console.log(index + ':' + obj.value);
});
What I would like to do is create JSON like below:
[{
"title": "Test1",
"message": "Test1 message",
"ip_address": "1.1.1.1",
"led_colour" : "255,0,0,0"},
{
"title": "Test2",
"message": "Test2 message",
"ip_address": "2.2.2.2",
"led_colour" : "255,0,0,0"},
{
"title": "Test3",
"message": "Test3 message",
"ip_address": "3.3.3.3",
"led_colour" : "255,0,0,0"
}]
A simple way is to loop each tr and get all .leds inputs, get the name of input and it's value an build object, then put it to array. See the code bellow.
var itemsArray = [];
$.each($('tr'), function() {
var item = {};
$(this).find('.leds').each(function(index, obj) {
item[$(obj).attr("name")]=$(obj).val();
});
itemsArray.push(item);
});
I think it's solution, but better need modify your html structure
1) In your case:
function getJson(keys) {
let result = [];
$('.leds').each(function(i) {
let keyIndex = i % keys.length,
key = keys[keyIndex];
if (!keyIndex) {
result.push({});
}
let index = result.length - 1;
result[index][key] = this.value;
})
return result;
}
const jsonData = getJson(['title', 'message', 'ip_address', 'led_colour']);
console.log('jsonData:', jsonData);
2) Try use tbody for group your tr
DEMO in Codepen.io
function getJson() {
let result = [];
$('tbody').each(function() {
let item = {}
$('.leds', this).each(function() {
let $this = $(this);
item[$this.prop('name')] = $this.val();
})
result.push(item);
})
console.log('result:', result)
return result;
}
$(() => {
getJson();
$('button').click(() => {
console.clear();
const jsonData = getJson();
alert(JSON.stringify(jsonData));
})
})
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Get Json Data</button>
<table>
<tbody>
<tr>
<td style="width: 5%">
<label>Title:</label>
</td>
<td>
<input type="text" name="title" style="width:150px" value="title1" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>Message:</label>
</td>
<td>
<input type="text" name="message" style="width: 150px" value="mess1" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>IP address:</label>
</td>
<td>
<input type="text" name="ip_address" style="width:150px" value="192.168.1.1" class="leds"/>
</td>
<td style="width: 5%">
<label>Message Colour:</label>
</td>
<td>
<select type="text" name="led_colour" style="width:150px" class="leds">
<option value=""></option>
<option value="255,0,0,0" selected="selected">Red</option>
<option value="0,255,0,0">Green</option>
<option value="0,0,255,0">Blue</option>
<option value="255,165,0,0">Orange</option>
<option value="255,255,0,0">Yellow</option>
<option value="255,255,255,0">White</option>
<option value="128,0,128,0">Purple</option>
<option value="255,0,255,0">Fuchsia</option>
<option value="192,192,192,0">Silver</option>
</select>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td style="width: 5%">
<label>Title:</label>
</td>
<td>
<input type="text" name="title" style="width:150px" value="title2" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>Message:</label>
</td>
<td>
<input type="text" name="message" style="width: 150px" value="mess2" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>IP address:</label>
</td>
<td>
<input type="text" name="ip_address" style="width:150px" value="192.168.1.2" class="leds"/>
</td>
<td style="width: 5%">
<label>Message Colour:</label>
</td>
<td>
<select type="text" name="led_colour" style="width:150px" class="leds">
<option value=""></option>
<option value="255,0,0,0" selected="selected">Red</option>
<option value="0,255,0,0">Green</option>
<option value="0,0,255,0">Blue</option>
<option value="255,165,0,0">Orange</option>
<option value="255,255,0,0">Yellow</option>
<option value="255,255,255,0">White</option>
<option value="128,0,128,0">Purple</option>
<option value="255,0,255,0">Fuchsia</option>
<option value="192,192,192,0">Silver</option>
</select>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td style="width: 5%">
<label>Title:</label>
</td>
<td>
<input type="text" name="title" style="width:150px" value="title3" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>Message:</label>
</td>
<td>
<input type="text" name="message" style="width: 150px" value="mess3" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>IP address:</label>
</td>
<td>
<input type="text" name="ip_address" style="width:150px" value="192.168.1.3" class="leds"/>
</td>
<td style="width: 5%">
<label>Message Colour:</label>
</td>
<td>
<select type="text" name="led_colour" style="width:150px" class="leds">
<option value=""></option>
<option value="255,0,0,0" selected="selected">Red</option>
<option value="0,255,0,0">Green</option>
<option value="0,0,255,0">Blue</option>
<option value="255,165,0,0">Orange</option>
<option value="255,255,0,0">Yellow</option>
<option value="255,255,255,0">White</option>
<option value="128,0,128,0">Purple</option>
<option value="255,0,255,0">Fuchsia</option>
<option value="192,192,192,0">Silver</option>
</select>
</td>
</tr>
</tbody>
</table>
I've setup a form that performs certain basic calculations using Calculate() function in Javascript. It has 5 select boxes for QUANTITY, which when you change, the "litres" and "total amount" get updated.
The form works perfect in Chrome and Opera but DOES NOTHING! in Firefox and Safari.
You can check it here – http://jsfiddle.net/bksuru/ajsggpcg/
THE HTML:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="60" colspan="5" valign="top"><h2>Variants:</h2></td>
</tr>
<tr>
<td height="40" align="left"><div class="variant">Flowers:</div></td>
<td height="45" align="right" style="padding-right:14px;"><label>Size<select name="flowers_size" id="flsz" type="text" size="1" class="select2" tabindex="1" ><option selected="selected">200 ML</option></select></label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Price<input name="flowers_price" type="text" class="input5" id="flpr" tabindex="1" value="MRP 1495.00" readonly="readonly" /></label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Quantity<select name="flowers_quantity" id="flqt" type="text" size="1" class="select3" tabindex="1" oninput="calculate()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></label></td>
<td height="45" align="right"><label>Litres<input name="flowers_litres" type="text" class="input6" id="fllt" tabindex="1" value="0.000" readonly="readonly" /></label></td>
</tr>
<tr>
<td height="40" align="left"><div class="variant">Fruits:</div></td>
<td height="45" align="right" style="padding-right:14px;"><label>Size<select name="fruits_size" id="frsz" type="text" size="1" class="select2" tabindex="1" ><option selected="selected">200 ML</option></select></label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Price<input name="fuits_price" id="frpr" type="text" class="input5" tabindex="1" value="MRP 1295.00" readonly="readonly" />
</label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Quantity<select name="fruits_quantity" id="frqt" type="text" class="select3" size="1" tabindex="1" oninput="calculate()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</label></td>
<td height="45" align="right"><label>Litres<input name="fruit_litres" id="frlt" type="text" class="input6" tabindex="1" value="0.000" readonly="readonly" />
</label></td>
</tr>
<tr>
<td height="40" align="left"><div class="variant">Plantations:</div></td>
<td height="45" align="right" style="padding-right:14px;"><label>Size<select name="flowers_size" id="flsz" type="text" size="1" class="select2" tabindex="1" ><option selected="selected">200 ML</option></select></label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Price<input name="flowers_price" id="plpr" type="text" class="input5" tabindex="1" value="MRP 1195.00" readonly="readonly" />
</label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Quantity<select name="flowers_quantity" id="plqt" size="1" class="select3" tabindex="1" oninput="calculate()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</label></td>
<td height="45" align="right"><label>Litres<input name="plantations_litres" id="pllt" type="text" class="input6" tabindex="1" value="0.000" readonly="readonly" />
</label></td>
</tr>
<tr>
<td height="40" align="left"><div class="variant">Vegetables:</div></td>
<td height="45" align="right" style="padding-right:14px;"><label>Size<select name="vegetables_size" id="vesz" type="text" size="1" class="select2" tabindex="1" ><option selected="selected">200 ML</option></select></label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Price<input name="vegetables_price" id="vepr" type="text" class="input5" tabindex="1" value="MRP 995.00" readonly="readonly" />
</label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Quantity<select name="vegetables_quantity" id="veqt" size="1" class="select3" tabindex="1" oninput="calculate()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</label></td>
<td height="45" align="right"><label>Litres<input name="vegetables_quantity" type="text" class="input6" id="velt" tabindex="1" value="0.000" readonly="readonly" />
</label></td>
</tr>
<tr>
<td height="40" align="left"><div class="variant">Cereals:</div></td>
<td height="45" align="right" style="padding-right:14px;"><label>Size<select name="cereals_size" id="cesz" type="text" size="1" class="select2" tabindex="1" ><option selected="selected">200 ML</option></select></label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Price<input name="cereals_price" id="cepr" type="text" class="input5" tabindex="1" value="MRP 895.00" readonly="readonly" />
</label></td>
<td height="45" align="right" style="padding-right:14px;"><label>Quantity<select name="cereals_quantity" id="ceqt" size="1" class="select3" tabindex="1" oninput="calculate()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</label></td>
<td height="45" align="right"><label>Litres<input name="cereals_litres" id="celt" type="text" class="input6" tabindex="1" value="0.000" readonly="readonly" />
</label></td>
</tr>
<tr>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="total">
<tr>
<td align="left" valign="middle"><label class="variant">Total Amount:<input name="total_amount" type="text" class="input7" id="tamt" tabindex="1" value="MRP 0.00" readonly="readonly" /></label></td>
<td align="right" valign="middle"><input name="Submit" type="button" class="button" value="SUBMIT"/></td>
</tr>
</table>
</tr>
</table>
THE JAVASCRIPT:
function calculate() {
var flowersSize = 200;
var flowersPrice = 1495;
var fruitsSize = 200;
var fruitsPrice = 1295;
var plantationsSize = 200;
var plantationsPrice = 1195;
var vegetablesSize = 200;
var vegetablesPrice = 995;
var cerealsSize = 200;
var cerealsPrice = 895;
var flowersQuantity = flqt.options[flqt.selectedIndex].value;
var fruitsQuantity = frqt.options[frqt.selectedIndex].value;
var plantationsQuantity = plqt.options[plqt.selectedIndex].value;
var vegetablesQuantity = veqt.options[veqt.selectedIndex].value;
var cerealsQuantity = ceqt.options[ceqt.selectedIndex].value;
var flowersLitres = flowersSize * flowersQuantity / 1000;
var fruitsLitres = fruitsSize * fruitsQuantity / 1000;
var plantationsLitres = plantationsSize * plantationsQuantity / 1000;
var vegetablesLitres = vegetablesSize * vegetablesQuantity / 1000;
var cerealsLitres = vegetablesSize * cerealsQuantity / 1000;
flowersLitres = parseFloat(Math.round(flowersLitres * 100) / 100).toFixed(3);
fruitsLitres = parseFloat(Math.round(fruitsLitres * 100) / 100).toFixed(3);
plantationsLitres = parseFloat(Math.round(plantationsLitres * 100) / 100).toFixed(3);
vegetablesLitres = parseFloat(Math.round(vegetablesLitres * 100) / 100).toFixed(3);
cerealsLitres = parseFloat(Math.round(cerealsLitres * 100) / 100).toFixed(3);
fllt.value = flowersLitres;
frlt.value = fruitsLitres;
pllt.value = plantationsLitres;
velt.value = vegetablesLitres;
celt.value = cerealsLitres;
var totalAmount = flowersQuantity * flowersPrice + fruitsQuantity * fruitsPrice + plantationsQuantity * plantationsPrice + vegetablesQuantity * vegetablesPrice + cerealsQuantity * cerealsPrice;
totalAmount = parseFloat(Math.round(totalAmount * 100) / 100).toFixed(2);
tamt.value = "MRP"+" "+totalAmount.toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
Any help is much appreciated.
Thanks!
BK Suru
You're using the onInput event.
This event is for input and textarea elements. Not select elements.
More specifically
<input type="password">
<input type="search">
<input type="text">
<textarea>
Use onChange event instead.
Apparently some browser do support onInput on other elements but that is not a standard.
Edit (Added example):
<select name="flowers_quantity" ... oninput="calculate()">
Change it to:
<select name="flowers_quantity" ... onchange="calculate()">
just change the method oninput to onchange
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
}