as an assignment of my university, I made this simple Static Log-In Form using JavaScript and HTML, but there is one Even Handler onclick which is not working, I tried all possible solutions, I tried to sue tag to make button as well, but still its not working. Kindly help me where i am doing mistake. Below is my code:
<html>
<head>
<title> Test File </title>
<script>
function checkEmailField()
{
if (document.username.sender.value.length < 1)
{
window.alert("Caution! You did not enter your Email");
}
}
</script>
</head>
<body bgcolor="pink">
<table align="center">
<tr>
<td align="center">
<b> <h1> Fill the following form to log in: </h1> </b>
<form name="logIn" method="post" action="sendMailScriptURL">
<table border="1">
<tr>
<td> <b> Email: </b> </td>
<td> <input type="text" name="username" size="50"> <br> </td>
</tr>
<tr>
<td> <b> Password: </b> </td>
<td> <input type="password" name="password" size ="50"> </td>
</tr>
<tr>
<td> <b> Logging in from: </b> </td>
<td>
<input type="radio" name="from" value="campus"> Campus <br>
<input type="radio" name="from" value="home"> Home
</td>
</tr>
<tr>
<td> <b> I am using: </b> </td>
<td>
<select name="OS" size="1">
<option value="Windows" selected> Windows
<option value="Linux/UNIX"> LINUX/UNIX
<option value="Mac OSX"> Mac OSX
</select>
</td>
</tr>
<tr>
<td> <b> I have: </b> </td>
<td>
<input type="checkbox" name="have" value="Computer"> Computer <br>
<input type="checkbox" name="have" value="Mobile"> Mobile <br>
<input type="checkbox" name="have" value="Printer"> Printer <br>
<input type="checkbox" name="have" value="Scanner"> Scanner
</td>
</tr>
<tr>
<td> <button onclick="checkEmailField()"> Log In </button></td>
</tr>
</table>
</form>
</td>
</tr>
</body>
</html>
So there are two issue here: the first is in the way you try to access your email field's value in your "checkEmailField" function. You want to access the forms attribute of the document object, then your particular form, and finally the field you want. I'm not sure why you have "sender" in there too - I'm guessing that's a typo.
The second issue is that you have only this one button in your form. By default, and to be nice, browsers will then use this lone button as a "submit" button. When you hit the button, the form will submit no matter what. You want to prevent the submit if the email is empty. You do this by returning false in your "checkEmailField" function and by returning the function's return value in your onclick handler.
Try this version instead:
<html>
<head>
<title> Test File </title>
<script>
function checkEmailField()
{
if (document.forms.logIn.username.value.length < 1)
{
window.alert("Caution! You did not enter your Email");
return false;
}
return true;
}
</script>
</head>
<body bgcolor="pink">
<table align="center">
<tr>
<td align="center">
<b> <h1> Fill the following form to log in: </h1> </b>
<form name="logIn" method="post" action="sendMailScriptURL">
<table border="1">
<tr>
<td> <b> Email: </b> </td>
<td> <input type="text" name="username" size="50"> <br> </td>
</tr>
<tr>
<td> <b> Password: </b> </td>
<td> <input type="password" name="password" size ="50"> </td>
</tr>
<tr>
<td> <b> Logging in from: </b> </td>
<td>
<input type="radio" name="from" value="campus"> Campus <br>
<input type="radio" name="from" value="home"> Home
</td>
</tr>
<tr>
<td> <b> I am using: </b> </td>
<td>
<select name="OS" size="1">
<option value="Windows" selected> Windows
<option value="Linux/UNIX"> LINUX/UNIX
<option value="Mac OSX"> Mac OSX
</select>
</td>
</tr>
<tr>
<td> <b> I have: </b> </td>
<td>
<input type="checkbox" name="have" value="Computer"> Computer <br>
<input type="checkbox" name="have" value="Mobile"> Mobile <br>
<input type="checkbox" name="have" value="Printer"> Printer <br>
<input type="checkbox" name="have" value="Scanner"> Scanner
</td>
</tr>
<tr>
<td> <button onclick="return checkEmailField();"> Log In </button></td>
</tr>
</table>
</form>
</td>
</tr>
</body>
</html>
Hope this helps!
Place your javascript code before the ending of <body> tag, that should fix the problem of the js function call.
<html>
<head>
<title> Test File </title>
</head>
<body bgcolor="pink">
<table align="center">
<tr>
<td align="center">
<b> <h1> Fill the following form to log in: </h1> </b>
<form name="logIn" method="post" action="sendMailScriptURL">
<table border="1">
<tr>
<td> <b> Email: </b> </td>
<td> <input type="text" name="username" size="50"> <br> </td>
</tr>
<tr>
<td> <b> Password: </b> </td>
<td> <input type="password" name="password" size ="50"> </td>
</tr>
<tr>
<td> <b> Logging in from: </b> </td>
<td>
<input type="radio" name="from" value="campus"> Campus <br>
<input type="radio" name="from" value="home"> Home
</td>
</tr>
<tr>
<td> <b> I am using: </b> </td>
<td>
<select name="OS" size="1">
<option value="Windows" selected> Windows
<option value="Linux/UNIX"> LINUX/UNIX
<option value="Mac OSX"> Mac OSX
</select>
</td>
</tr>
<tr>
<td> <b> I have: </b> </td>
<td>
<input type="checkbox" name="have" value="Computer"> Computer <br>
<input type="checkbox" name="have" value="Mobile"> Mobile <br>
<input type="checkbox" name="have" value="Printer"> Printer <br>
<input type="checkbox" name="have" value="Scanner"> Scanner
</td>
</tr>
<tr>
<td> <button onclick="checkEmailField()"> Log In </button></td>
</tr>
</table>
</form>
</td>
</tr>
<script>
function checkEmailField()
{
if (document.username.sender.value.length < 1)
{
window.alert("Caution! You did not enter your Email");
}
}
</script>
</body>
</html>
document.username won't match anything, so you'll get an error: Cannot read property 'sender' of undefined. You'll have to look it up in the DOM using a traversal method. The easiest is probably to add an id to the username input field: input id="username" name="username" and then use document.getElementById (or you could use document.querySelector). Here's a quick jsFiddle: https://jsfiddle.net/tztyky6g/
Change the code document.username.sender.value.length < 1
To
var email = document.forms[0].elements["username"].value;
document object contains a forms property, Since in this HTML you have 1 form, so you can access it like document.forms[0] and then you need to access the username input which can be done using document.forms[0].elements["username"]
Also, you are not creating any property username on document object so if you try access document.username it will return undefined as no property name username exists in document object.
Complete Code:
<html>
<head>
<title> Test File </title>
<script>
function checkEmailField()
{
var email = document.forms[0].elements["username"].value;
if (email.length < 1)
{
window.alert("Caution! You did not enter your Email");
return false;
}
}
</script>
</head>
<body bgcolor="pink">
<table align="center">
<tr>
<td align="center">
<b> <h1> Fill the following form to log in: </h1> </b>
<form name="logIn" method="post" action="sendMailScriptURL">
<table border="1">
<tr>
<td> <b> Email: </b> </td>
<td> <input type="text" name="username" size="50"> <br> </td>
</tr>
<tr>
<td> <b> Password: </b> </td>
<td> <input type="password" name="password" size ="50"> </td>
</tr>
<tr>
<td> <b> Logging in from: </b> </td>
<td>
<input type="radio" name="from" value="campus"> Campus <br>
<input type="radio" name="from" value="home"> Home
</td>
</tr>
<tr>
<td> <b> I am using: </b> </td>
<td>
<select name="OS" size="1">
<option value="Windows" selected> Windows
<option value="Linux/UNIX"> LINUX/UNIX
<option value="Mac OSX"> Mac OSX
</select>
</td>
</tr>
<tr>
<td> <b> I have: </b> </td>
<td>
<input type="checkbox" name="have" value="Computer"> Computer <br>
<input type="checkbox" name="have" value="Mobile"> Mobile <br>
<input type="checkbox" name="have" value="Printer"> Printer <br>
<input type="checkbox" name="have" value="Scanner"> Scanner
</td>
</tr>
<tr>
<td> <button onclick="checkEmailField()"> Log In </button></td>
</tr>
</table>
</form>
</td>
</tr>
</body>
</html>
You shoudl change you function accessing to the element in proper way
function checkEmailField()
{
var myElem = document.getElementsByName('username');
if (myElem[0].value.length < 1)
{
window.alert("Caution! You did not enter your Email");
}
}
Related
I have designed a form according to our given assignment. But the following error message is shown:
App Table Design is not correct:
NoSuchElementError: no such element: Unable to locate element: {"method":"xpath","selector":"//body/table/tbody/tr[1]/td[1]"}
The assignment is as follows (Design a Web page for customers for renting the page).
<!DOCTYPE html>
<html>
<body>
<h2><span style="background-color:#000080; color:#ff6600">Rent Toys</span></h2>
<form>
<table>
<tbody>
<tr>
<td><label for="tname">Toy name:</label></td>
<td>
<select id="tname" name="tname">
<option value="Bicycle">Bicycle</option>
<option value="Train">Train</option>
<option value="Doll">Doll</option>
<option value="Teddy Bear">Teddy Bear</option>
<option value="Kite">5</option>
<option value="Airplane">Airplane</option>
<option value="Model Car">Model Car</option>
<option value="Art Farm">Art Farm</option>
<option value=" Lego Mind storms"> Lego Mind storms</option>
<option value="Speak and Spell">Speak and Spell</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="ttype">Customer Name:</label>
</td>
<td>
<input type="text" id="ttype" name="ttype" pattern="[A-Za-z]{5,}" onblur="blurFunction()">
</td>
</tr>
<tr>
<td>
<label for="ttype">Rent Start Date</label>
</td>
<td>
<input type="date" id="Rdate" name="Rdate" >
</td>
</tr>
<tr>
<td>
<label for="minage">Rent Tenure</label>
</td>
<td>
<input type="text" id="RTdate" name="RTdate" pattern="[0-9]">
</td>
</tr>
<tr>
<td>
<label for="maxage">Number of Toys available</label></td>
<td>
<input type="text" id="RTdate" name="RTdate" pattern="[0-9]">
</td>
</tr>
<tr>
<td>
<label for="price">Enter Number of Toys</label>
</td>
<td>
<input type="text" id="quant" name="quant" >
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit Query" onclick="calculate()">
</td>
</tr>
</tbody>
</table>
</form>
<script>
// No focus = Changes the background color of input to red
function blurFunction() {
document.getElementById("ttype").style.background = "red";
}
function calculate(){
var costperday=100;
var qty=document.getElementById('quant').value;
var rtdate=document.getElementById('RTdate').value;
var show=qty*rtdate*costperday;
confirm(show);
confirm("Thank you for order Mr/Ms/Mrs:"+document.getElementById('ttype').value);
}
</script>
</body>
</html>
Change your code so you pass the DOM element to the function
HTML
<input type="text" id="ttype" name="ttype" pattern="[A-Za-z]{5,}" onblur="blurFunction(this)">
Javascript
function blurFunction(e) {
e.style.background = "red";
}
This looks like error from Selenium(probably). It is looking for xpath: //body/table/tbody/tr[1]/td[1]
but in your code table is wrapped inside of form element so xpath should look something like this: //body/form/table/tbody/tr[1]/td[1]
Change xpath or change your page structure in order to match required path
use theadas a table heading.<label for="tname">Toy name:</label> all headings add in thead
<thead>
<tr>
<th scope="col"><label for="tname">Toy name:</label></th>
</tr>
Well after a lot of research I found out the solution (might not be general i.e for every one) that removal of tag makes the code acceptable for the compiler..... Thank You
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've built asimple webstie that contains three pages.i created a form in home page and something goes wrong with my javascript - i'm having a problem in setting a field right next to the input field with a rellevant message to the user telling him what he did wrong(prompt).
so i'm inputing below the honmePage (the form wich is in the body of the page -html) and the script its self wich includes a simple function.
My purpose is to check if user fills the field name and after that he delete it,so i want to display a red color message that tells the user that this field is requierd.
i'd be glad if someone can help me with that.
function validateName(){
var name=document.getElementById("fullName").value;
if (name.length == null)
{
nameRequiredPromt("Name Is Required",fullNamePrompt,"white");
return false;
}
}
function nameRequiredPromt(message,promtLocation,color){
document.getElementById(promtLocation).innerHTML=message;
document.getElementById(promtLocation).style.color=color;
}
<form id="form" style="color:white;">
<table>
<tr>
<td>
FullName :
</td>
<td>
<input type="text" placeholder="fullName" id="fullName"
onkeyup="validateName()" type="text"/> <label id="fullNamePrompt">aaaa
</label> <br>
</td>
</tr>
<tr>
<td>
E-mail :
</td>
<td>
<input type="email" placeholder="email" id="email"/><label
id="emailPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
New Password :
</td>
<td>
<input type="password" placeholder="password" id="newPassWord"/> <label
id="PasswordPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
Repeat Password :
</td>
<td>
<input type="password" placeholder="repeatedPassword"
id="repeatedPassWord"/> <label id="repeatedPassWordPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="submit" id="submit"/> <label
id="submitPrompt"> </label><br>
</td>
</tr>
</table>
</form>
i did some checks to be sure that the script works and it did work so i think my problem is in the decleration of the lable "id".
switch
name.length == null
to
!name.length
length will be zero not null
also fullNamePrompt appears undefined
try nameRequiredPromt("Name Is Required","fullNamePrompt","white");
Fixed: name.length == null and also fullNamePrompt undefined and color: white to red
function validateName(){
var name=document.getElementById("fullName").value;
if (!name.length)
{
nameRequiredPromt("Name Is Required","fullNamePrompt","red");
return false;
}
}
function nameRequiredPromt(message,promtLocation,color){
document.getElementById(promtLocation).innerHTML=message;
document.getElementById(promtLocation).style.color=color;
}
<form id="form" style="color:white;">
<table>
<tr>
<td>
FullName :
</td>
<td>
<input type="text" placeholder="fullName" id="fullName"
onkeyup="validateName()" type="text"/> <label id="fullNamePrompt">aaaa
</label> <br>
</td>
</tr>
<tr>
<td>
E-mail :
</td>
<td>
<input type="email" placeholder="email" id="email"/><label
id="emailPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
New Password :
</td>
<td>
<input type="password" placeholder="password" id="newPassWord"/> <label
id="PasswordPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
Repeat Password :
</td>
<td>
<input type="password" placeholder="repeatedPassword"
id="repeatedPassWord"/> <label id="repeatedPassWordPrompt"> </label><br>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="submit" id="submit" onclick="return validateName();"/> <label
id="submitPrompt"> </label><br>
</td>
</tr>
</table>
</form>
if (name && !name.length)
{
nameRequiredPromt("Name Is Required","fullNamePrompt","white");
return false;
}
first condition checks if name is null, second for checking if name.length is 0.
I would like to think that if you do something in the first id = "benodigheden" that there is something specific then a second rule is for id = "benodigheden" I also couldn't find anything on the internet. I think you need to have java but here is my knowledge still too small for.
I hope somebody can help me.
This is my HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="benodigheden1">Benodigheden:</label>
</td>
<td>
<input type="text" id="benodigheden1"name="benodigheden1" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="ingrediënten1">Ingrediënten:</label>
</td>
<td>
<input type="text" id="ingrediënten1"name="ingrediënten1" placeholder="Ingrediënten" required="required" />
</td>
</tr>
<tr>
<td>
<label for="stappenplan">Stappenplanm:</label>
</td>
<td>
<textarea name="stappenplan" id="stappenplan" cols="40" rows="5" placeholder="Stappenplan" required="required" /></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.
If I understand correctly you want an extra line (rule?) to appear once you enter text in it, and that this should happen for those inputs that have a sequence number in their id.
For this I suggest you include jQuery and add a script that detects input changes, and adds a new input if needed, with the next available sequence number:
$(document).on('keyup change input', 'input, textarea', function() {
if (!$(this).val().replace(/\s/g, '').length) {
// no text entered, so don't add line
return;
}
var id = $(this).attr('id');
// Extract name and linenumber from id
var res = id.split(/(\d+$)/);
if (res.length < 2) {
// No line number, so don't add line
return;
}
var newId = res[0] + (parseInt(res[1]) + 1);
if ($('#' + newId).length) {
// Not the last line, so don't add line
return;
}
// Add a line, and make it non-mandatory
$(this).clone()
.attr('id', newId).removeAttr('required')
.val('')
.insertAfter(this)
.before($('<br>'));
});
Although the above can be done in pure javascript it is much more cumbersome, and harder to deal with cross-browser issues.
You can see it work in this fiddle.
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
}