rgajapathi
Technical User
Hello FellowCoders!
I am stuck w/ this problem and I am not sure how to proceed. I have a HTML form and I am also using Struts with it and a CSS. The Submit Button according to the Standards that we have cannot be implemented as a <Input type="Submit">. However, using the CSS and standards, I have to implement as an Anchor with images of a Submit and Reset Button. The Since I am using Struts, we use a function to evaluate if the mandatory fields are filled or not.
The page on opening looks perfect uses the CSS. When I click on submit, the function is invoked and message is displayed. However, I loose all my formatting and the fields and texts and labels are displayed without any of the color formatting provided. The sample code is:
<html:html locale="true">
<head>
<title><bean:message key="enterClaimForm.title"/></title>
<link rel="stylesheet" href="portal/styles/Style.css" type="text/css">
<script language="JavaScript" src="portal/javascript/jsfunc.js"></script>
<script language="JavaScript" src="javascript/utility.js"></script>
<script language="JavaScript">
function changeButtonImages(id, action) {
if ( action == "over" ) {
//set the style class of the dynamic buttons to Over State
document.getElementById( id + 'Head').className = "buttonOverHead"
document.getElementById( id + 'Body').className = "buttonOverBody"
document.getElementById( id + 'Tail').className = "buttonOverTail"
}
else if ( action =="clickon"
{
//set the style class of the dynamic buttons to Clickon State
document.getElementById( id + 'Head').className = "buttonClickonHead"
document.getElementById( id + 'Body').className = "buttonClickonBody"
document.getElementById( id + 'Tail').className = "buttonClickonTail"
}
else if ( action =="regular" {
//set the style class of the dynamic buttons to Regular State
document.getElementById( id + 'Head').className = "buttonRegHead"
document.getElementById( id + 'Body').className = "buttonRegBody"
document.getElementById( id + 'Tail').className = "buttonRegTail"
}
}
function init() {
document.getElementById('submitHead').className = "buttonRegHead"
document.getElementById('submitBody').className = "buttonRegBody"
document.getElementById('submitTail').className = "buttonRegTail"
document.getElementById('resetHead').className = "buttonRegHead"
document.getElementById('resetBody').className = "buttonRegBody"
document.getElementById('resetTail').className = "buttonRegTail"
}
<html:base/>
</head>
<body bgcolor="white" onLoad="init()">
<html:errors/>
<html:form action="/EnterClaim" focus="phoneNumber" onsubmit="return validateClaimForm(this);">
............
............
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td id="submitHead"> </td>
<td id="submitBody" align=center>
<a class="buttonLabel" href="#"
onClick="javascript:validateClaimForm(document.claimForm);"
onMouseOver="changeButtonImages('submit', 'over')"
onMouseOut="changeButtonImages('submit', 'regular')"
onMouseDown="changeButtonImages('submit', 'clickon')"
onMouseUp="changeButtonImages('submit', 'regular')">Submit
</a>
</td>
<td id="submitTail"> </td>
<td class = buttonSpace> </td>
<td id="resetHead"> </td>
<td id="resetBody" align=center>
<a class="buttonLabel" href="javascript:document.forms[0].reset();"
onMouseOver="changeButtonImages('reset', 'over')"
onMouseOut="changeButtonImages('reset', 'regular')"
onMouseDown="changeButtonImages('reset', 'clickon')"
onMouseUp="changeButtonImages('reset', 'regular')">Reset
</a>
</td>
<td id="resetTail"> </td>
</tr>
</table>
.........
U'r help would be very much appreciated.
TIA,
Raj.
I am stuck w/ this problem and I am not sure how to proceed. I have a HTML form and I am also using Struts with it and a CSS. The Submit Button according to the Standards that we have cannot be implemented as a <Input type="Submit">. However, using the CSS and standards, I have to implement as an Anchor with images of a Submit and Reset Button. The Since I am using Struts, we use a function to evaluate if the mandatory fields are filled or not.
The page on opening looks perfect uses the CSS. When I click on submit, the function is invoked and message is displayed. However, I loose all my formatting and the fields and texts and labels are displayed without any of the color formatting provided. The sample code is:
<html:html locale="true">
<head>
<title><bean:message key="enterClaimForm.title"/></title>
<link rel="stylesheet" href="portal/styles/Style.css" type="text/css">
<script language="JavaScript" src="portal/javascript/jsfunc.js"></script>
<script language="JavaScript" src="javascript/utility.js"></script>
<script language="JavaScript">
function changeButtonImages(id, action) {
if ( action == "over" ) {
//set the style class of the dynamic buttons to Over State
document.getElementById( id + 'Head').className = "buttonOverHead"
document.getElementById( id + 'Body').className = "buttonOverBody"
document.getElementById( id + 'Tail').className = "buttonOverTail"
}
else if ( action =="clickon"
{//set the style class of the dynamic buttons to Clickon State
document.getElementById( id + 'Head').className = "buttonClickonHead"
document.getElementById( id + 'Body').className = "buttonClickonBody"
document.getElementById( id + 'Tail').className = "buttonClickonTail"
}
else if ( action =="regular"
{//set the style class of the dynamic buttons to Regular State
document.getElementById( id + 'Head').className = "buttonRegHead"
document.getElementById( id + 'Body').className = "buttonRegBody"
document.getElementById( id + 'Tail').className = "buttonRegTail"
}
}
function init() {
document.getElementById('submitHead').className = "buttonRegHead"
document.getElementById('submitBody').className = "buttonRegBody"
document.getElementById('submitTail').className = "buttonRegTail"
document.getElementById('resetHead').className = "buttonRegHead"
document.getElementById('resetBody').className = "buttonRegBody"
document.getElementById('resetTail').className = "buttonRegTail"
}
<html:base/>
</head>
<body bgcolor="white" onLoad="init()">
<html:errors/>
<html:form action="/EnterClaim" focus="phoneNumber" onsubmit="return validateClaimForm(this);">
............
............
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td id="submitHead"> </td>
<td id="submitBody" align=center>
<a class="buttonLabel" href="#"
onClick="javascript:validateClaimForm(document.claimForm);"
onMouseOver="changeButtonImages('submit', 'over')"
onMouseOut="changeButtonImages('submit', 'regular')"
onMouseDown="changeButtonImages('submit', 'clickon')"
onMouseUp="changeButtonImages('submit', 'regular')">Submit
</a>
</td>
<td id="submitTail"> </td>
<td class = buttonSpace> </td>
<td id="resetHead"> </td>
<td id="resetBody" align=center>
<a class="buttonLabel" href="javascript:document.forms[0].reset();"
onMouseOver="changeButtonImages('reset', 'over')"
onMouseOut="changeButtonImages('reset', 'regular')"
onMouseDown="changeButtonImages('reset', 'clickon')"
onMouseUp="changeButtonImages('reset', 'regular')">Reset
</a>
</td>
<td id="resetTail"> </td>
</tr>
</table>
.........
U'r help would be very much appreciated.
TIA,
Raj.