I test my issue in Firefox. I click the save button(it is a input, and the type is button), it ought to execute:
onclick="checkchar()"
but it did not.
My part of code in jsp:
<script language="javascript">
function checkchar(){
/*
if(document.Form2.stationRun.value.length>2500){
alert("站点运行情况字数不能超过2500字");
return;
}
if(document.Form2.devRun.value.length>2500){
alert("设备运行情况字数不能超过2500字");
return;
}
*/
//alert('before...');
document.Form2.action="${pageContext.request.contextPath}/system/elecCommonMsgAction_save.do";
document.Form2.submit();
alert(" 待办事宜保存成功!");
}
...
<input type="button" name="BT_Submit" value="保存" onclick="checkchar()" id="BT_Submit" style="font-size:12px; color:black; height:20px;width:50px">
I don't know why I click my save button, the method did not execute, some one can help me with this? and if is caused by the upload stylesheet (http://localhost:8080/css/Font.css)? I am not sure.
EDIT
Because the main framework is frameset, and the javascript methods and the input button is in my main page(you can see the below, which is in red rectangle I add). So use firebug it shows there do not contains any javascript code.
EDIT -2
The all code of my actingIndex.jsp:
<%# page language="java" pageEncoding="UTF-8"%>
<%--引入struts tags--%>
<%# taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>运行监控模块编辑</title>
<link href="${pageContext.request.contextPath }/css/Style.css" type="text/css" rel="stylesheet">
<link href="${pageContext.request.contextPath }/css/showText.css" type="text/css" rel="stylesheet">
<script language="javascript" src="${pageContext.request.contextPath }/script/function.js"></script>
<script language="javascript" src="${pageContext.request.contextPath }/script/limitedTextarea.js"></script>
<script language="javascript" src="${pageContext.request.contextPath }/script/showText.js"></script>
<script src="${pageContext.request.contextPath}/ckeditor/ckeditor.js"/>
<script src="${pageContext.request.contextPath}/ckfinder/ckfinder.js"/>
<script type="text/javascript">
function checkchar(){
/*
if(document.Form2.stationRun.value.length>2500){
alert("站点运行情况字数不能超过2500字");
return;
}
if(document.Form2.devRun.value.length>2500){
alert("设备运行情况字数不能超过2500字");
return;
}
*/
alert('before...');
document.Form2.action="${pageContext.request.contextPath}/system/elecCommonMsgAction_save.do";
document.Form2.submit();
alert(" 待办事宜保存成功!");
}
function addEnter(element){
document.getElementById(element).value = document.getElementById(element).value+"<br>";
}
function checkTextAreaLen(){
var stationRun = new Bs_LimitedTextarea('stationRun', 2500);
stationRun.infolineCssStyle = "font-family:arial; font-size:11px; color:gray;";
stationRun.draw();
var devRun = new Bs_LimitedTextarea('devRun', 2500);
devRun.infolineCssStyle = "font-family:arial; font-size:11px; color:gray;";
devRun.draw();
}
window.onload=function(){
//checkTextAreaLen();
}
</script>
</head>
<body>
<form name="Form1" id="Form1" method="post">
<table cellSpacing="1" cellPadding="0" width="90%" align="center" bgColor="#f5fafe" border="0">
<tbody>
<tr height=10><td></td></tr>
<tr>
<td>
<TABLE style="WIDTH: 105px; HEIGHT: 20px" border="0">
<TR>
<TD align="center" background="${pageContext.request.contextPath }/images/cotNavGround.gif"><img src="${pageContext.request.contextPath }/images/yin.gif" width="15"></TD>
<TD class="DropShadow" background="${pageContext.request.contextPath }/images/cotNavGround.gif">运行监控列表</TD>
</TR>
</TABLE>
</td>
</tr>
<tr>
<td class="ta_01" align="center" bgColor="#f5fafe" colspan=3>
<table cellspacing="0" cellpadding="1" rules="all" bordercolor="gray" border="1" id="DataGrid1"
style="BORDER-RIGHT:gray 1px solid; BORDER-TOP:gray 1px solid; BORDER-LEFT:gray 1px solid; WIDTH:100%; WORD-BREAK:break-all; BORDER-BOTTOM:gray 1px solid; BORDER-COLLAPSE:collapse; BACKGROUND-COLOR:#f5fafe; WORD-WRAP:break-word">
<tr style="FONT-WEIGHT:bold;FONT-SIZE:12pt;HEIGHT:25px;BACKGROUND-COLOR:#afd1f3">
<td align="center" width="40%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">站点运行情况</td>
<td align="center" width="40%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">设备运行情况</td>
<td align="center" width="20%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">创建日期</td>
</tr>
<div id="showInfomation" style="visibility: hidden"></div>
<tr onmouseover="this.style.backgroundColor = 'white'" onmouseout="this.style.backgroundColor = '#F5FAFE';">
<td style="HEIGHT:22px" align="center" width="40%">
<div class="scrollStyle" align="left" onmouseover="showInfoWithPanel(this)" onmouseout="hiddenInfoPanel(this)" style="table-layout:fixed;">
<s:property value="stationRun"/>
</div>
</td>
<td style="HEIGHT:22px" align="center" width="40%">
<div class="scrollStyle" align="left" onmouseover="showInfoWithPanel(this)" onmouseout="hiddenInfoPanel(this)" style="table-layout:fixed;">
<s:property value="devRun"/>
</div>
</td>
<td style="HEIGHT:22px" align="center" width="20%">
<s:date name="createDate" format="yyyy-MM-dd HH:mm:ss" />
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</form>
<form name="Form2" id="Form2" method="post">
<table cellspacing="1" cellpadding="5" width="90%" align="center" bgcolor="#f5fafe" style="border:1px solid #8ba7e3" border="0">
<tr>
<td class="ta_01" colspan=2 align="center" background="${pageContext.request.contextPath }/images/b-info.gif">
<font face="宋体" size="2"><strong>运行监控编辑</strong></font>
</td>
</tr>
<tr height=10><td></td><td></td></tr>
<tr>
<td class="ta_01" align="center" bgcolor="#f5fafe" width="15%">站点运行情况：</td>
<td class="ta_01" bgcolor="#ffffff" style="word-break: break-all">
<s:textarea name="stationRun" id="stationRun" cssstyle="width: 1000px; height: 160px; padding: 1px;FONT-FAMILY: 宋体; FONT-SIZE: 9pt" onkeydown="if(event.keyCode==13)addEnter('stationRun');"></s:textarea>
<!--<script type="text/javascript">
CKEDITOR.replace("stationRun", {height:200, width:800});
</script>-->
</td>
</tr>
<tr>
<td class="ta_01" align="center" bgcolor="#f5fafe" width="15%">设备运行情况：</td>
<td class="ta_01" bgcolor="#ffffff" style="word-break: break-all">
<s:textarea name="devRun" id="devRun" cssstyle="width:1000px; height: 160px; padding:1px;FONT-FAMILY: 宋体; FONT-SIZE: 9pt" onkeydown="if(event.keyCode==13)addEnter('devRun');"></s:textarea>
<!-- <script type="text/javascript">
CKEDITOR.replace("devRun", {height:200, width:800});
</script> -->
</td>
</tr>
<tr>
<td class="ta_01" style="width: 100%" align="center" bgcolor="#f5fafe" colspan="2">
<input type="button" name="BT_Submit" value="保存" onclick="checkchar()" id="BT_Submit" style="font-size:12px; color:black; height:20px;width:50px">
<input style="font-size:12px; color:black; height:20px; width:80px" id="BT_Export" type="button" value="导出设置" name="BT_Export"
onclick="openWindow('${pageContext.request.contextPath }/system/exportExcel.jsp?belongTo=5-3','700','400')">
</td>
</tr>
</table>
</form>
</body>
</html>
You open script tag , But it is not closed,and
it is important to insert the script at the END of the page. So that the page
can register the controls first.
function checkchar(){
/*
if(document.Form2.stationRun.value.length>2500){
alert("站点运行情况字数不能超过2500字");
return;
}
if(document.Form2.devRun.value.length>2500){
alert("设备运行情况字数不能超过2500字");
return;
}
*/
//alert('before...');
//document.Form2.action="${pageContext.request.contextPath}/system/elecCommonMsgAction_save.do";
//document.Form2.submit();
alert(" 待办事宜保存成功!");
}
<input type="button" name="BT_Submit" value="保存" onclick="checkchar()" id="BT_Submit" style="font-size:12px; color:black; height:20px;width:50px">
Try this checkchar() function
function checkchar(){
alert("Hello");
}
Related
I'm looking for a way to update an image in response to a user clicking the table that contains it.
This is my HTML:
<table width="100%" border="0" id="bottoneM">
<tr><td width="18%"></td>
<td>
<fieldset id="sugg_risp">
<center>
<table border="0" height="100%" width="100%">
<tr>
<td width="2%" align="center"></td><td width="2%"></td>
<td height="100%" width="88%" align="left">
<font face="Geneva, Arial, Helvetica, sans-serif">Descrivi il tuo problema</font>
</a></td>
<td>
<IMG SRC="freccia1.gif" name="PHOTO_CHANCE" >
</td>
</tr>
</table>
</center>
</fieldset>
</td>
<td width="18%"></td>
</tr><tr><td></td><td>
<div id="menuM" style="display:none;">
<table border="0" height="100%" width="100%">
<tr>
<td width="2%" align="center"></td><td width="2%"></td>
<td height="100%" width="88%" align="left">
<font face="Geneva, Arial, Helvetica, sans-serif">Cosa 1</font>
</a></td>
</tr>
<tr>
<td width="2%" align="center"></td><td width="2%"></td>
<td height="100%" width="88%" align="left">
<font face="Geneva, Arial, Helvetica, sans-serif">Cosa 2</font>
</a></td>
</tr>
<tr>
<td width="2%" align="center"></td><td width="2%"></td>
<td height="100%" width="88%" align="left">
<font face="Geneva, Arial, Helvetica, sans-serif">Cosa 3</font>
</a></td>
</tr>
<tr>
<td width="2%" align="center"></td><td width="2%"></td>
<td height="100%" width="88%" align="left">
<font face="Geneva, Arial, Helvetica, sans-serif">Cosa 4</font>
</a></td>
</tr>
<tr>
<td width="2%" align="center"></td><td width="2%"></td>
<td height="100%" width="88%" align="left">
<font face="Geneva, Arial, Helvetica, sans-serif">Cosa 5</font>
</a></td>
</tr>
</table>
</div>
</td></tr>
</td>
</table>
When I click the table id="bottoneM", I would like to change "freccia1.gif" to "freccia2.gif".
The page uses this JavaScript/JQuery for the list that appears:
$(document).ready(function(){
$("#bottoneM").click(function(){
$("#menuM").slideToggle();
});
});
Thank you so much for the replies!
Since you are using JQuery already, you can use attr() to update the src attribute.
$(document).ready(() => {
const myImage = $('#my-image');
const urls = [
'https://placeimg.com/200/200/animals',
'https://placeimg.com/200/200/people',
'https://placeimg.com/200/200/arch',
'https://placeimg.com/200/200/nature',
'https://placeimg.com/200/200/tech'
];
let i = 0;
$('#my-button').click(() => {
if (i < urls.length - 1) i++;
else i = 0;
myImage.attr('src', urls[i]);
});
});
#container {
display: flex;
flex-direction: column;
max-width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<button id="my-button">Refresh</button>
<img src="https://placeimg.com/200/200/animals" id="my-image" alt="image" />
<div>
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.
Here is the original site. usahvacsupply.com Once you search an item, the search results take over the whole page and kill the background. I'm not sure how to control the overflow. The part of the site where the overflow goes haywire is http://www.usahvacsupply.com/servlet/Categories. I'll post more code if needed. The code on the bottom corresponds with the http://www.usahvacsupply.com/servlet/Categories page. any help would be appreciated.
<table id="body" width="960" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="100%">
<script type="text/javascript">
if (!createBookmark) {
var createBookmark = function() {
if (window.sidebar) // Mozilla Firefox Bookmark
window.sidebar.addPanel(document.title, location.href, '');
else if (window.external) // IE Favorite
window.external.AddFavorite(location.href, document.title);
else // all others
alert("Please press CTRL+D to bookmark this page.");
};
}
</script>
<table id="layout" class="panel-layout" width="100%" cellspacing="0" cellpadding="0" border="0" rules="none">
<tbody>
<tr>
<td id="p1" valign="top">
<script type="text/javascript">
var ProStores;
if (!ProStores)
ProStores = {};
ProStores.PageLink = function(link) {
var strParams = 's=' + link.getAttribute('page');
var strThis = location.href;
if (strThis.indexOf('?') > -1) {
if (strThis.search(/s=[0-9]+/) > -1)
link.href = strThis.replace(/s=[0-9]+/, strParams);
else
link.href = strThis + '&' + strParams;
}
else
link.href = strThis + '?' + strParams;
};
</script>
<link href="/servlet/0-3-30d-727500-com.prostores.panel.List%7Estyle.css/Asset" title="style" type="text/css" rel="stylesheet">
<style type="text/css">
<table id="cataloglist.31" class="list-boundary" width="100%" cellspacing="0" cellpadding="0" border="0" rules="none">
<tbody>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" rules="none">
<tbody>
<tr>
<td valign="top" align="left" colspan="1">
<h1 align="left">Search Results</h1>
<div class="" align="left" style="padding:2px">
<p>
Found
<b>1000</b>
product(s) for
<b>All</b>
(1-25 of 1000)
</p>
</div>
</td>
</tr>
<tr>
<td valign="middle" colspan="1">
<div class="product-list-container">
<div class="top">
<div class="right">
<div class="left"></div>
</div>
</div>
<div class="titlebar group-title">
<b> Breakers | Bryant Carrier Payne Day&Night </b>
</div>
<div class="panel-content">
<center>
<table class="" width="100%" cellspacing="2" cellpadding="0" border="0">
<tbody>
<tr>
<td colspan="1" style="height:1px"></td>
</tr>
<tr>
<td class="item-cell" width="100%" valign="bottom" height="100%" style="padding:8px">
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" rules="none">
</td>
</tr>
<tr>
</tbody>
</table>
</center>
</div>
<div class="bottom">
</div>
</td>
</tr>
<tr>
<tr>
<tr>
<tr>
<tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I can see that your problem isn't occuring anymore, but when you search for a product that doesn't exist. Your div.footerBorder gets floated over the background to the left. Fix that by applying:
margin-left: 10px;
To your
/servlet/0-0-30d-13e0e1158d0-legacycss/Asset
Inside your ".footerBorder" on row 240, replace the whole rule to:
.footerBorder {
width: 960px;
min-height: 160px;
background: url("/images/store_version1/footer.gif") no-repeat;
margin-left: 10px;
}
Edit:
If that conflicts on other pages, let me know and I'll help you with it. Cheers!
I have written an ASP page with javascript for validating a form, then to have it redirect (form.action) to another page but it just reloads the page. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- InstanceBegin template="/Templates/nirsaplate_forms.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="Title/Keywords" -->
<title>TED CEU/PIC Tracking System</title>
<meta name="keywords">
<script type="text/javascript">
var typesAndCovered={};
typesAndCovered['CEU']=['Philosphy & Theory','Programming','Management Techniques','Business Procedures','Facility Management, Planning & Design','Research & Evaluation','Legal Liability & Risk Management','Personal & Professional Qualities'];
typesAndCovered['PIC']=['Leadership, governance and service','Education, training, scholarship and research'];
function ChangeTypeList()
{
var typeList=document.getElementById("Atype");
var coveredList=document.getElementById("typecovered");
var selType=typeList.options[typeList.selectedIndex].value;
while (coveredList.options.length)
{
coveredList.remove(0);
}
var types=typesAndCovered[selType];
if (types)
{
for (var i=0;i<types.length;i++)
{
var Atype=new Option(types[i],i);
coveredList.options.add(Atype);
}
}
}
</script>
<script type="text/javascript">
<!--
function validateForm(form) {
if (form.Atype.value == "") {
alert("You must specify activity to track: CEU or PIC?");
form.Atype.focus();
return false;
}
if (form.DateEvent.value == "") {
alert("You must specify a date for this event.");
form.DateEvent.focus();
return false;
}
if (form.NameEvent.value == "") {
alert("You must specify a name for this event.");
form.NameEvent.focus();
return false;
}
if (form.NameSession.value == "") {
alert("You must specify a session name.");
form.NameSession.focus();
return false;
}
if (form.UnitsEarned.value == "") {
alert("You must specify how many units you earned.");
form.UnitsEarned.focus();
return false;
}
if (form.CEUPICType.value == "") {
alert("You must specify a CEU/PIC type.");
form.CEUPICType.focus();
return false;
}
if (form.TEDEvent.value == "") {
alert("You must specify if this was a TED event or not.");
form.TEDEvent.focus();
return false;
}
if (form.TypeCovered.value == "") {
alert("You must specify CEU Core Competency or PIC Category.");
form.TypeCovered.focus();
return false;
}
form.action = "display.asp";
form.submit();
return true;
}
//-->
</script>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload="ChangeTypeList();">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center" valign="middle" bgcolor="#000033">
<td> </td>
<td align="left" width="150"><a class="tedhome" href="http://www.ted.org"> TED Home</a></td>
<td id="tedtop" width="450" height="20"> </td>
<td width="150"></td>
<td> </td>
</tr>
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tr valign="top" bgcolor="#003399" height="60">
<td rowspan="2" colspan="2" height="80"><img src="images/ted_head_1.jpg" alt="TED" height="80" width="500" border="0"></td>
<td height="60"><img src="images/ted_head_2.jpg" alt="" height="60" width="250" border="0"></td>
</tr>
<tr valign="top" bgcolor="#003399" height="20">
<td id="toplinks" align="right" valign="middle" height="20"><p></p></td>
</tr>
<tr bgcolor="#e3e3e3">
<td colspan="3" align="center" height="20"><div id="tagline"> </div></td>
</tr>
<!-- Begin mainNav -->
<tr bgcolor="#003399">
<td colspan="3" height="20"> </td>
</tr>
<!-- End mainNav -->
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tr align="left" valign="top">
<td>
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tr valign="top">
<td><!-- InstanceBeginEditable name="Content" -->
<div id="Content"><h1>TED CEU/PIC Tracking System</h1>
<p><font color="#cc0000">* Required field</font></p>
<form name="form" Method="post" onSubmit="return validateForm(form)">
<table width="650" border="0" cellspacing="1" cellpadding="3" align="center" bgcolor="gray">
<tr valign="top">
<td colspan="2" bgcolor="#FFCC66"><h4>CEU/PIC Details:</h4></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> Activity to Track:</strong></p></td>
<td bgcolor="#FFFFFF"><p><select name="Atype" id="Atype" onchange="ChangeTypeList();">
<option value="">-- Activity Type --</option>
<option value="CEU">CEU</option>
<option value="PIC">PIC</option></select></p></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">* </font>Date:</strong></p></td>
<td bgcolor="#FFFFFF"><input name="DateEvent" type="text" class="ctrl" id="DateEvent" size="10" maxlength="10"></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> Name of Event:</strong></p></td>
<td bgcolor="#FFFFFF"><input name="NameEvent" type="text" id="NameEvent" size="50" maxlength="255"></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> Name of Educational Session:</strong></p></td>
<td bgcolor="#FFFFFF"><input name="NameSession" type="text" id="NameSession" size="50" maxlength="255"></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> CEUs/PICs Earned:</strong></p></td>
<td bgcolor="#FFFFFF"><input name="UnitsEarned" type="text" class="ctrl" id="UnitsEarned" size="50" maxlength="255"></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> CEU/PIC Type:</strong></p></td>
<td bgcolor="#FFFFFF"><input name="CEUPICType" type="text" id="CEUPICType" size="25" maxlength="255"></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> TED Event:</strong></p></td>
<td bgcolor="#FFFFFF"><p><select name="TEDEvent" id="TEDEvent"><option value="Yes" selected>Yes</option><option value="No">No</option></select></p></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> CEU/PIC Core Competency/Category Covered:</strong></p></td>
<td bgcolor="#FFFFFF"><p><select id="typecovered"></select></p></td>
</tr>
<tr valign="top">
<td colspan="2" align="center" bgcolor="#FFCC66"><p><br><b>Submit your CEU/PIC tracking.</b></p><p align="center"> </p></td>
</tr>
<tr valign="top">
<td colspan="2" align="center" bgcolor="#FFFFFF"><p><input type="submit" value="Submit Data" name="submit" ><input type="reset" name="reset" value="Reset"></p></td>
</tr>
</table>
</form>
</div>
<!-- InstanceEndEditable -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<!-- InstanceEnd -->
</html>
Any assistance would be very helpful.
Thank you.
My guess is that you're entering an endless loop, and that it causes a "stack overflow" error ;)
Try removing the form.submit(); after the for.action = ...
form.action = "display.asp";
// form.submit(); // this is what triggers validateForm again and again...
You used form.TypeCovered in function validateForm(form), but the actual id is typecovered (all lower cases), that would cause an exception, so that the function fails
This is my first question here so let me know if i have not understood the site ethos ;)
I have written a html page for showing and hiding nested tables.
I would like to get the columns to align correctly. I have got close by setting the columns to have a specific width
in both IE and firefox the columns are a few pixels out... - how can i fix this?
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>item List</title>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == '') {
e.style.display = 'block';
}
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
</head>
<body>
<div id="root">
<table border="1" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="200">
<p>itemA</p>
</td>
<td width="200">Feild2</td>
<td width="200">Feild3</td>
</tr>
<tr>
<td colspan="3">
<div id="itemAAA">
<table border="1" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="200">
<p>itemAA</p>
</td>
<td width="200">Feild2</td>
<td width="200">Feild3</td>
</tr>
<tr>
<td colspan="3">
<div id="itemAA">
<table border="1" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="200">
<p>itemAAA</p>
</td>
<td width="200">Feild2</td>
<td width="200">Feild3</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td width="200">
<p>itemB</p>
</td>
<td width="200">Feild2</td>
<td width="200">Feild3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
any ideas? is there a better option to acheive the same functionality?
David
Ok, I think the problem is in the fact that you try to use a static value for the column width (you specify 200px) and than you assign a width of 100% to the table.
You ask two very different things to the browser I think. It have to stretch the widths in some manner.
The other problem is in the definition of the borders, paddings and margins: you don't exactly know (or you don't take into account) how the browser draws the borders/paddings/margins, so you can't specify precise values.
if you want to transform your table in a static one, you can use something like this:
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>item List</title>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == '') {
e.style.display = 'block';
}
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<style>
table{
background-color: black;
}
td{
background-color: white;
margin: 0;
padding: 2px;
}
</style>
</head>
<body>
<div id="root">
<table cellspacing="2">
<tbody>
<tr>
<td width="200">
<p>itemA</p>
</td>
<td width="200">Feild2</td>
<td width="200">Feild3</td>
</tr>
<tr>
<td colspan="3">
<div id="itemAAA">
<table cellspacing="2">
<tbody>
<tr>
<td width="196">
<p>itemAA</p>
</td>
<td width="200">Feild2</td>
<td width="196">Feild3</td>
</tr>
<tr>
<td colspan="3">
<div id="itemAA">
<table cellspacing="2">
<tbody>
<tr>
<td width="192">
<p>itemAAA</p>
</td>
<td width="200">Feild2</td>
<td width="192">Feild3</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td width="200">
<p>itemB</p>
</td>
<td width="200">Feild2</td>
<td width="200">Feild3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
As you can see, I deleted the widths from the tables and I put som css in the cose. The widths of the columns are exactly calculated to take in account borders, margins and paddings.
Try this out. The interesting bit is the css border-collapse property. Also notice that deprecated html attributes (width, etc.) have been removed in favor of css rules.
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>item List</title>
<style>
table.grid { padding:0; margin:0; width:100%; border-collapse:collapse; }
table.grid td { padding:0; margin:0; outline:1px outset silver; width:33% }
table.grid div { padding:0; margin:0; }
</style>
<script type="text/javascript">
function toggle_visibility (id) {
var e = document.getElementById(id);
if (e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
</script>
</head>
<body>
<div id="root">
<table class="grid">
<tbody>
<tr>
<td>
<p>itemA</p>
</td>
<td>Feild2</td>
<td>Feild3</td>
</tr>
<tr>
<td colspan="3">
<div id="itemAAA">
<table class="grid">
<tbody>
<tr>
<td>
<p>itemAA</p>
</td>
<td>Feild2</td>
<td>Feild3</td>
</tr>
<tr>
<td colspan="3">
<div id="itemAA">
<table class="grid">
<tbody>
<tr>
<td>
<p>itemAAA</p>
</td>
<td>Feild2</td>
<td>Feild3</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<p>itemB</p>
</td>
<td>Feild2</td>
<td>Feild3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>