My webpage is not showing option of scrolling... while page expands downwards, things get hidden from my screen.
style.css
body {
font-family:"Times New Roman", Times, serif;
font color:#FFFFFF;
font-size: 16px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-image:url(images/Red-Black-HD-Wallpapers.jpg);
background-attachment:scroll;
}
Here comes my form and I used some style tag in between the code. As I am new to this, please help me come out from here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vender 1</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div align="center" id="mainWrapper">
<?php include "header.php";?>
<div id="pageContent"><br />
<div align="right" style=" padding-top:50px; margin-right:32px; color:#FF0000"><a style="color:#FF0000" href="vender1.php#inventoryForm">+ Add New Inventory Item</a></div>
<div align="left" style="margin-left:24px;">
<h2 style="color:#FF0000">Inventory list</h2>
<?php echo $product_list; ?>
</div>
<hr />
<a name="inventoryForm" id="inventoryForm"></a>
<h3 style="color:#FF0000">
↓ Add New Inventory Item Form ↓
</h3>
<form action="vender1.php" enctype="multipart/form-data" name="myForm" id="myform" method="post">
<table width="90%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td width="20%" align="right" style="color:#FF0000">Product Name</td>
<td width="80%"><label>
<input name="product_name" type="text" id="product_name" size="64" />
</label></td>
</tr>
<tr>
<td align="right" style="color:#FF0000">Product Price</td>
<td><label>
$
<input name="price" type="text" id="price" size="12" />
</label></td>
</tr>
<tr>
<td align="right" style="color:#FF0000">Category</td>
<td><label>
<select name="category" id="category">
<option value="Clothing">Clothing</option>
</select>
</label></td>
</tr>
<tr>
<td align="right" style="color:#FF0000">Subcategory</td>
<td><select name="subcategory" id="subcategory">
<option value=""></option>
<option value="Hats">Hats</option>
<option value="Pants">Pants</option>
<option value="Shirts">Shirts</option>
</select></td>
</tr>
<tr>
<td align="right" style="color:#FF0000">Product Details</td>
<td><label>
<textarea name="details" id="details" cols="64" rows="5"></textarea>
</label></td>
</tr>
<tr>
<td> </td>
<td><label>
<input type="submit" name="button" id="button" value="Add This Item Now" />
</label></td>
</tr>
</table>
</form>
<br />
<br />
</div>
Log Out
</div>
</body>
</html>
I don't know how to get my scrolling. All css I used is included in my code.
Related
Good morning.
I'm trying to implement automated authorization for our staff (WiFi). I am done filling their credentials in fields but I can't make it so button is pressed.
Html page source:
<html>
<head>
<title>Web Authentication</title>
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
//not important.
</STYLE>
<noscript>
<meta HTTP-EQUIV="REFRESH" content="0; url=https://mydomain.ru/login_noscript.html">
</noscript>
<script language="javascript" src="/loginscript.js"></script>
<script>
function getErrorMsgIfAny(){
if(document.forms[0].err_flag.value == 1){
document.writeln(' \
<tr align="center"> <td colspan="2" style="color:#CC0000">Login Error.</td>\
</tr><tr align="center"> <td width="350" class="message" colspan="2">The User Name and Password combination you have entered is invalid. Please try again.</td></tr>\
<tr> <td class="caption" colspan="2"> </td></tr>');
}else{
document.writeln(' ');
}
}
function unhideform(){
document.getElementById("formId").style.display = "block";
}
</script>
</head>
<body bgcolor="#ffffff" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >
<FORM method="post" ACTION="/login.html">
<INPUT TYPE="hidden" NAME="buttonClicked" SIZE="16" MAXLENGTH="15" VALUE="0">
<INPUT TYPE="hidden" NAME="err_flag" SIZE="16" MAXLENGTH="15" VALUE="0">
<INPUT TYPE="hidden" NAME="err_msg" SIZE="32" MAXLENGTH="31" VALUE="">
<INPUT TYPE="hidden" NAME="info_flag" SIZE="16" MAXLENGTH="15" VALUE="0">
<INPUT TYPE="hidden" NAME="info_msg" SIZE="32" MAXLENGTH="31" VALUE="">
<INPUT TYPE="hidden" NAME="redirect_url" SIZE="255" MAXLENGTH="255" VALUE="">
<INPUT TYPE="hidden" NAME="network_name" SIZE="64" MAXLENGTH="64" VALUE="Guest Network">
<div id="formId">
<table border="0" cellspacing=0 cellpading="0" width="100%">
<tr>
<td width="180" background="../../images/background_web41.jpg" align="middle" style="padding-bottom: 4px;" >
<h1>Login</h1>
</td>
<td height="53" align="right" style="padding-bottom: 4px; padding-right: 20px;" background="../../images/background_web41.jpg"><div align="right"><img src="../../images/cisco/cisco-webauth-logo-2007.gif" width="67" height="40"></div></td>
</tr>
<tr>
<td align="left" width="400">
<div class="content">
<table border="0" cellspacing="10" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="10" cellpadding="0">
<tr>
<th align="left" width="400">
Welcome
</th>
</tr>
<tr>
<td class="message" align="left" width="400">
You are connected to wireless network of South Ural State University. Please enter username and password provided to you.
</td>
</tr>
</table>
</td>
</tr>
<script>
getErrorMsgIfAny();
</script>
<tr>
<td>
<table border="0" cellspacing="10" cellpadding="0">
<tr>
<td width="100" nowrap>User Name</td>
<td>
<INPUT type="TEXT" name="username" SIZE="25" MAXLENGTH="80" VALUE="">
</td>
</tr>
<tr>
<td nowrap>Password</td>
<td>
<INPUT type="Password" name="password" emweb_type=PASSWORD autocomplete="off" EMWEB_TYPE=PASSWORD onKeyPress="submitOnEnter(event);" SIZE="25" MAXLENGTH="127" VALUE="">
</td>
</tr>
<tr>
<td> </td>
<td>
<script>getHtmlForButton("Submit","Submit","button","submitAction()"); </script>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
<td align="right" >
<table border="0" cellspacing="10" cellpadding="0" >
<tr>
<td align="right" style="padding-top: 25px; padding-right: 20px;"
bgcolor="#ffffff" >
<div ></div></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="newLoginWebConsent" style="display:none; font-size:13px; font-family: 'CiscoSansThin, Helvetica Neue, Arial, Tahoma, sans-serif';">
<p id="welcomeMsg" style="text-align: center; font-size:20px; margin-top: 25px;">
Welcome to Guest Network
</p>
<div style="margin:30px 10px 30px 10px">
<div id="content" style="border: 2px solid #bbbbbb; border-radius: 3px; margin: 0 auto; padding: 10px; max-width: 600px;">
<div id="page1">
<p>
<span style="font-family:'CiscoSansThin';">Please agree to the terms of use and connect.</span><br/>
<INPUT type="checkbox" id="loginAccept" NAME="loginAccept" onchange="termsAccepted();" / >
I accept the terms of use
</p>
<br/><br/>
<BUTTON class="tiny" type="button" id="loginConnectButton" onclick="submitAction();" disabled>
Connect
</button>
</div>
<div id="page2" style="display: none">
<p>
This service is intended for use by authorized guests at this facility. This is an open/unprotected wireless network. By using this service, guests understand and accept that it is their responsibility to protect their own computer while connected to this service, and irrevocably waive any right, cause or action, remedy or other claim against the host with respect to any damage that may be caused to a computer while it is using this network.
</p>
<br/><br/>
<BUTTON class="tiny" type="button" id="loginAcceptButton" onclick="show_accept_terms();">
Back
</button>
</div>
</div>
</div>
<div style="text-align: center;">
<img id="cisco_powered_logo" src="images/cisco_powered_logo.png"/>
</div>
</div>
</FORM>
<script>
</script>
</body>
<HEAD>
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
</HEAD>
</html>
I evaluate JS like this (in onPageFinished()):
String injectLogin = "javascript:document.getElementsByName('username')[0].value = '" + login + "';";
String injectPassword = "javascript:document.getElementsByName('password')[0].value = '" + password + "';";
String injectButtonPress = "javascript:document.getElementByName('Submit')[0].click;";
mWebView.evaluateJavascript(injectLogin, null);
mWebView.evaluateJavascript(injectPassword, null);
mWebView.evaluateJavascript(injectButtonPress, null);
I've tried many really weird stuff but can't make it work. Thank you in advance.
I want to know how to display list of selected values in popup window as dropdown.
here is my clientview.jsp code
</head>
<body>
<jsp:include page="clientusrmapheader.jsp">
<jsp:param name="" value="true"/>
</jsp:include>
<div class="tcc" style="min-height:620px; width:100%;float:left;">
<form:form method="POST" modelAttribute="clientAccounts" action="/client_user_map.html">
<div id='baseDiv'>
<input type="submit" value="CLIENT-USER MAP"/>
<%# include file="/WEB-INF/views/clientusermap.jsp"%>
</div>
<table>
<thead>
<tr>
<th><span class="selectALLWrap"> <input type='checkbox' id='selectALL' onclick='selectALLQuestion()'></span><span>Select</span> </th>
<th class="sortable" id='clientName' >Client Name</th>
</tr>
</thead>
<tbody style="font-size: 18px;font-family: 'HelveticaNeue-Medium';">
<c:forEach items="${clientAccountsList}" var="clientAccount">
<tr>
<td><div class="checkBoxSel"><form:checkbox path="clientName" value="${clientAccount.clientName}"/> </div></td>
<td>${clientAccount.clientName}</td>
</tr>
</c:forEach>
</table>
</form:form>
</div>
</body>
when above code executes i get list of clients .. now i want to select few client and click on client-user map ... those values should dispaly as popup...
I have written another jsp where selected client appears..
here is clientusermap.jsp
<link rel="stylesheet" type="text/css" href="/css/clientusermap.css" />
<html>
<head>
<script>
$("#baseDiv").click(function(e) {
$("#popUpDiv").show();
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
</head>
<body>
<div class="tcc" style="min-height:620px; width:100%;float:left;">
<form:form modelAttribute="clientAccounts">
<table border="0">
<tr>
<tr>
<td class = "select">select user :
</td>
<td ALIGN="center">
<select>
</select>
</td>
</tr>
<tr>
<td class = "select">List of Clients :
</td>
<td ALIGN="center">
<div id="popUpDiv">
<form:select path="clientName" id="selectPopUp">
<form:option value="-1">Select</form:option>
<form:options items="${clientNameList}" />
</form:select>
</div>
</td>
</tr>
</TR>
</table>
</form:form>
<input TYPE="submit" VALUE="save">
<input TYPE="reset" VALUE="cancle">
</div>
</body>
</html>
Screen capture
My code is not loading the textarea from tinymce.min.js , i have included everything and i have also tried DTEDITOR don't remember the name but still no solution:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Admin Area </title>
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script>
tinymce.init({selector:'textarea'});
</script>
</head>
<body bgcolor="grey">
<form method="post" action="insert_product.php" enctype="multipart/form- data">
<table width="700" align="center" border="1" bgcolor="#006699">
<tr align="center">
<td colspan="2">
<h2> Insert new Product</h2>
</td>
</tr>
<tr>
<td align="right">
<b>Product Title</b>
</td>
<td>
<input type="text" name="product_title" size="50"/>
</td>
</tr>
<tr>
<td align="right">
<b>Product Category</b>
</td>
<td>
<select name="product_cart">
<option>Select a Category</option>
<?php
$get_brands="select * from brands";
$run_brands=mysqli_query($con, $get_brands);
while($row_brands=mysqli_fetch_array( $run_brands)){
$brand_id = $row_brands['brand_id'];
$brand_title=$row_brands['brand_title'];
echo "<option value='$brand_id'>$brand_title </option>";
}
?>
</select>
</td>
</tr>
<tr>
<td align="right">
<b>Product image 1</b>
</td>
<td>
<input type="file" name="product_img1"/>
</td>
</tr>
<tr>
<td align="right">
<b>Product image 2</b>
</td>
<td>
<input type="file" name="product_img2"/>
</td>
</tr>
<tr>
<td align="right">
<b>Product image 3</b>
</td>
<td>
<input type="file" name="product_img3"/>
</td>
</tr>
<tr>
<td align="right">
<b>Product price</b>
</td>
<td>
<input type="text" name="product_price"/>
</td>
</tr>
<tr>
<td align="right">
<b>Product Description</b>
</td>
<td>
<textarea name="product_desc" cols="35" rows="10" ></textarea>
</td>
</tr>
<tr>
<td align="right">
<b>Product Keywords</b>
</td>
<td>
<input type="text" name="product_keywords" size="50"/>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" name="submit"/>
</td>
</tr>
</body>
</htmal>
You are calling tinymce.init({selector:'textarea'}); before the HTML for the textarea element exists. This script is run inline with the page loading, so you'll have to either move the script somewhere after the textarea element, or create an onload event handler.
Yesterday everything was working just fine but today I'm running into this annoying blank page whenever I try to run my application from the IDE.
My server is Glassfish/port4848 then run from the IDE http://localhost:8080/ecommerce/
The problem seems to be when I add these two library references at the top of the page:
<!DOCTYPE html>
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%#taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
Sql statetments
<sql:query var="selectedCategory" dataSource="jdbc/ecommerce">
SELECT name FROM category WHERE id = ?
<sql:param value="${pageContext.request.queryString}"/>
</sql:query>
<sql:query var="categoryProducts" dataSource="jdbc/ecommerce">
SELECT * FROM product WHERE category_id = ?
<sql:param value="${pageContext.request.queryString}"/>
</sql:query>
When I remove the SQL statements from the top, the page loads perfectly fine when I request it in my local browser. Thing is I need the libraries to be able to run these JSTL:
Category page/ left column (vertical menu bar)
<c:forEach var="category" items="${categories.rows}">
<c:choose>
<c:when test="${category.id == pageContext.request.queryString}">
<div class="categoryButton" id="selectedCategory">
<span class="categoryText">
${category.name}
</span>
</div>
</c:when>
<c:otherwise>
<a href="category?${category.id}" class="categoryButton">
<div class="categoryText">
${category.name}
</div>
</a>
</c:otherwise>
</c:choose>
</c:forEach>
Displaying the product within the table (right column/products container)
<c:forEach var="product" items="${categoryProducts.rows}" varStatus="iter">
<tr class="${((iter.index % 2) == 0) ? 'lightBlue' : 'white'}">
<td>
<img src="${initParam.productImagePath}${product.name}.png"
alt="${product.name}">
</td>
<td>
${product.name}
<br>
<span class="smallText">${product.description}</span>
</td>
<td>
€ ${product.price} / unit
</td>
<td>
<form action="addToCart" method="post">
<input type="hidden"
name="productId"
value="${product.id}">
<input type="submit"
value="add to cart">
</form>
</td>
</tr>
</c:forEach>
I'd like to precise that I don't have the issue with my index page that also contains JSTL and the two references at the top. The problem is only with my category page.
Full Category Source Code:
<!DOCTYPE html>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%#taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%--
Document : category
Created on : Feb 01, 2015, 7:56:19 PM
Author : PC
--%>
<sql:query var="categories" dataSource="jdbc/ecommerce">
SELECT * FROM category
</sql:query>
<sql:query var="selectedCategory" dataSource="jdbc/ecommerce">
SELECT name FROM category WHERE id = ?
<sql:param value="${pageContext.request.queryString}"/>
</sql:query>
<sql:query var="categoryProducts" dataSource="jdbc/ecommerce">
SELECT * FROM product WHERE category_id = ?
<sql:param value="${pageContext.request.queryString}"/>
</sql:query>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ecommerce | Online Shopping</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/category.css"/>
<link rel="stylesheet" type="text/css" href="css/header.css"/>
<link rel="stylesheet" type="text/css" href="css/footer.css"/>
</head>
<body style="margin: 0pt auto; padding: 0pt; max-width: 100%; width: 100%;">
<div id="store_container">
<div id="store">
<div style="text-align: center;" id="category">
<div id="items">categories
</div>
<div class="cat_row">
<div style="text-align: left;"><span style="font-weight: bold;"><span style="background-color: rgb(239, 239, 239);">Brand new
products</span><br>
</span><span style="font-weight: normal;"></span><span style="font-weight: bold; background-color: rgb(239, 239, 239);">Items
on Sale</span><br>
<span style="text-decoration: underline;"></span></div>
</div>
<div class="cat_row">
<div style="text-align: left;"><span style="text-decoration: underline;">Shop
by technology</span><br>
<br>
<c:forEach var="category" items="${categories.rows}">
<c:choose>
<c:when test="${category.id == pageContext.request.queryString}">
<div class="categoryButton" id="selectedCategory">
<span class="categoryText">
${category.name}
</span>
</div>
</c:when>
<c:otherwise>
<a href="category?${category.id}" class="categoryButton">
<div class="categoryText">
${category.name}
</div>
</a>
</c:otherwise>
</c:choose>
</c:forEach>
<br>
</div>
</div>
<div class="cat_row">
</div>
</div>
<div style="text-align: center;" id="thumbnails">
<div id="items"> Featured Items | ${selectedCategory.rows[0].name}
</div>
<br>
<div style="text-align: left;">
<div class="item_col">pages 1-2-3-4-5-6-7-8-10...<br>
</div>
<div style="text-align: left;" class="item_col2">24 per
page 48 per page 96 per page View
All<br>
</div>
</div>
<br>
<div id="thumb_container">
<table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0">
<c:forEach var="product" items="${products}" varStatus="iter">
<tbody>
<tr>
<td style="vertical-align: top; width: 275px;"><img src="${initParam.productImagePath}${product.name}.png"
alt="${product.name}"></td>
<td style="vertical-align: top; width: 275px;"><img src="${initParam.productImagePath}${product.name}.png"
alt="${product.name}"></td>
<td style="vertical-align: top; width: 275px;"><img src="${initParam.productImagePath}${product.name}.png"
alt="${product.name}"></td>
</tr>
<tr>
<td style="vertical-align: top; width: 275px;">${product.name}<br>
</td>
<td style="vertical-align: top; width: 275px;">${product.name}<br>
</td>
<td style="vertical-align: top;">${product.name}<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 275px;">&cad; ${product.price} / unit<br>
</td>
<td style="vertical-align: top;">&cad; ${product.price} / unit<br>
</td>
<td style="vertical-align: top;">&cad; ${product.price} / unit<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 275px;">
<table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top; width: 50%;"><form action="addToWishlist" method="post">
<input type="hidden"
name="productId"
value="${product.id}">
<input type="submit"
value="Add To Wishlist">
</form><br>
</td>
<td style="vertical-align: top;"><form action="addToCart" method="post">
<input type="hidden"
name="productId"
value="${product.id}">
<input type="submit"
value="Add To Cart">
</form><br>
</td>
</tr>
</tbody>
</table>
<br>
</td>
<td style="vertical-align: top;">
<table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<td style="vertical-align: top; width: 50%;"><form action="addToWishlist" method="post">
<input type="hidden"
name="productId"
value="${product.id}">
<input type="submit"
value="Add To Wishlist">
</form><br>
</td>
<td style="vertical-align: top;"><form action="addToCart" method="post">
<input type="hidden"
name="productId"
value="${product.id}">
<input type="submit"
value="Add To Cart">
</form></td>
</tr>
</tbody>
</table>
<br>
</td>
<td style="vertical-align: top;">
<table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top; width: 50%;"><form action="addToWishlist" method="post">
<input type="hidden"
name="productId"
value="${product.id}">
<input type="submit"
value="Add To Wishlist">
</form><br>
</td>
<td style="vertical-align: top;"><form action="addToCart" method="post">
<input type="hidden"
name="productId"
value="${product.id}">
<input type="submit"
value="Add To Cart">
</form></td>
</tr>
</tbody>
</c:forEach>
</table>
<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
</div>
</div>
</div>
</div>
</body>
</html>
Any idea?
Thanks a lot!
To display a page correctly is not related to the taglib .
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/sql" %>
Mostly is a false select statement the reason.
Your code does not match the variables !
So a <c:forEach with a rowcount == 0 will never run and your page is blank.
query var="selectedCategory" is never used.
${pageContext.request.queryString} is never tested.
Test ${pageContext.request.queryString} with : look here
<sql:query var="selectedCategory" dataSource="jdbc/ecommerce">
SELECT name FROM category WHERE id = ?
<sql:param value="${pageContext.request.queryString}"/>
</sql:query>
<c:forEach uses ${categories.rows} ! where it come from ?
<c:forEach var="category" items="${categories.rows}">
Replace param value="a valid ID" with a known value .
<sql:query var="selectedCategory" dataSource="jdbc/ecommerce">
SELECT name FROM category WHERE id = ?
<sql:param value="a valid ID"/>
</sql:query>
<c:forEach var="category" items="${selectedCategory.rows}">
<div class="categoryButton" id="selectedCategory">
<span class="categoryText">
${category.name}
</span>
</div>
</c:forEach>
Also items="${products}" is not matching any sql query.
<c:forEach var="product" items="${products}" varStatus="iter">
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
}