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.
Related
<form id="form2" method="get" action="#">
<table border="0" style="width: 800px; border: 0; padding: 16px; padding-left: 120px; vertical-align: central;">
<tr>
<td>TP Email</td>
<td>:</td>
<td><input type="email" id="email2" size="40" maxlength="24"/></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" id="password2" size="40"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><button id="button2" onclick="myFunction();">Login</button>
<script type="text/javascript">
function myFunction() {
var email2 = document.getElementById("email2").value;
alert(email2);
if (email2.toString() == 'illyam#gmail.com'){
location.replace("admin.html");
}else{
alert("Incorrect password or email");
}
}
</script></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>Do not have an account?<a href="sign_up.html"
style="background-color: #E6E6E6; color: #CE171C;">Sign Up</a></td>
</tr>
</table>
</form>
This function is supposed to get a value from the textbox with id email2 and if it is equal to a certain value then it redirects to another page.
When you click Login button it should redirect to another page but you need to use event.preventDefault() in your myFunction.
Try out the Code Below--
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello, world!</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
/>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<form id="form2" method="get" action="#">
<table
style="
width: 800px;
border: 0;
padding: 16px;
padding-left: 120px;
vertical-align: central;
"
>
<tr>
<td>TP Email</td>
<td>:</td>
<td><input type="email" id="email2" size="40" maxlength="24" /></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" id="password2" size="40" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<button id="button2" onclick="myFunction(event)">Login</button>
<script type="text/javascript">
function myFunction(event) {
event.preventDefault();
var email2 = document.getElementById("email2").value;
alert(email2);
if (email2.toString() == "illyam#gmail.com") {
location.replace("admin.html");
} else {
alert("Incorrect password or email");
}
}
</script>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
Do not have an account?<a
href="sign_up.html"
style="background-color: #e6e6e6; color: #ce171c"
>Sign Up</a
>
</td>
</tr>
</table>
</form>
</body>
</html>
can pass values to JavaScript functions like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function myFunction(email) {
if (email == 'illyam#gmail.com'){
location.replace("https://admin.html")
alert('redirecting to admin page')
}else{
alert("Incorrect password or email");
}
}
</script>
</head>
<body>
<form id="form2" method="get" action="#">
<table border="0" style="width: 800px; border: 0; padding: 16px; padding-left: 120px; vertical-align: central;">
<tr>
<td>TP Email</td>
<td>:</td>
<td><input type="email" id="email2" size="40" maxlength="24"/></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" id="password2" size="40"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><button id="button2" onclick="myFunction(document.getElementById('email2').value);">Login</button>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>Do not have an account?<a href="sign_up.html"
style="background-color: #E6E6E6; color: #CE171C;">Sign Up</a></td>
</tr>
</table>
</form>
</body>
</html>
I think what you want is to set the values inside the textbox and then get them as variables using JS.
You can have your HTML looking like this...
<td><button id="button2" onclick="myFunction(event);">Login</button></td>
And then have your JS script tag placed below your closing form tag like this...
<script type="text/javascript">
function myFunction(event) {
event.preventDefault();
var email2 = document.getElementById("email2").value;
if(email2.toString() == 'illyam#gmail.com'){
location.replace("admin.html");
}else{
alert("Incorrect password or email");
}
}
</script>
Your HTML onclick function now passes 'event' as an argument, this event object will be used in your script to cancel the normal form submission operation while you get your email values and evaluate them.
This is achieved with the help of event.preventdefault() function which stops the default qoperation of a form which is to submit information.
Side Note: I'd recommend that you use PHP and database for login purposes, having your login credentials in your script like this is dangerous as someone can easily go through your code and see them.
Good luck on your project.
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.
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 have jsp page it have username and password.if we fill up username and password and click on submit button then the browser asks Remember password then click on that it stores username and password.i donot want to store username and password in browser.i have use the autocomplete=off in jsp .
<form name="indexFrm" id="indexFrm" autocomplete="off" method="post">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Login</title>
<script src="http://code.jquery.com/jquery-1.11.min.js"></script>
<script type="text/javascript">
function login(btnName)
{
if(window.document.indexFrm.userIdTxt.value=="")
{
alert("Enter User Id");
window.document.indexFrm.userIdTxt.focus();
return false;
}
if(window.document.indexFrm.pwdTxt.value=="")
{
alert("Enter Password");
window.document.indexFrm.pwdTxt.focus();
return false;
}else{
window.document.indexFrm.action = "../epay/abcd.jsp";
document.indexFrm.method='post';
window.document.indexFrm.submit();
}
}
</script>
</head>
<body topmargin="0" leftmargin="0" background="../images/background.gif" onLoad = 'window.document.indexFrm.userIdTxt.focus();'>
<div id="wrapper">
<form name="indexFrm" id="indexFrm" autocomplete="off" method="post">
<table width="971" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" height="15" style="padding-right:4">
<div align="right">
<table border="1" width="10%" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF">
<tr>
<td width="50%" height="22" bgcolor="#3F9DE5">
<p align="center">Home </td>
</tr>
</table>
</div> </td>
</tr>
<tr>
<td width="100%" height="15"></td>
</tr>
<tr>
<td width="100%">
<div align="center">
<center>
<table border="1" width="60%" bordercolor="#7CC8FA" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<table width="100%" border="0" cellpadding="0" cellspacing="1" class="newtexts">
<tr>
<td width="100%" bgcolor="#ABDCFC" colspan="2" height="20">
<p align="center" class="newhead">LOGIN</td>
</tr>
<tr>
<td width="100%" bgcolor="#D6EEFE" colspan="2" height="21"> </td>
</tr>
<tr>
<td width="42%" bgcolor="#D6EEFE" align="right">User
Id </td>
<td width="58%" bgcolor="#D6EEFE"><input type="text" name="userIdTxt" size="20" autocomplete="off"></td>
</tr>
<tr>
<td width="42%" bgcolor="#D6EEFE" align="right">Password
</td>
<td width="58%" bgcolor="#D6EEFE"><input type=password name="pwdTxt" id="pwdTxt" size="20" autocomplete="off"></td>
</tr>
<td width="100%" colspan="2"><input name="stdSubBtn" type="button" class="newtexts" style="font-family: MS Sans Serif; font-size: 8pt; font-weight: bold" onClick = 'login(this.name);' ></td>
</table>
<input type="hidden" name="frmName" value="indexFrm">
</form>
</div>
</body>
</html>
Autocomplete works on HTML5.0, I think you are using below to that, just change your doctype tag to
<!DOCTYPE html>
Then try.
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
}