...

View Full Version : jump to anchor above checkbox



esthera
07-16-2007, 07:14 PM
i have a form that I do standard validation but when I validate a checkbox there is no way to jump to the checkbox -- is it possible to jump to a place in that div?
or any other recommended way of doing this>

vwphillips
07-17-2007, 12:01 AM
Are you wanting to identify elements that fail verification?

esthera
07-17-2007, 06:03 AM
yes
when a text box fails i jump to the text box but I can't do that for checkbox or radios and it's a very long form - is there anyway to do this?

vwphillips
07-17-2007, 12:26 PM
I do not think your requirement is practical.
if this is of interest I may be able to develop it


<!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" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// By Vic Phillips (30-June-2007) http://www.vicsjavascripts.org.uk

function zxcTabForm(zxcid,zxcw,zxch){
var zxcfrm=document.getElementById(zxcid);
var zxcclds=zxcfrm.childNodes;
var zxcsecary=[]
for (var zxc0=0;zxc0<zxcclds.length;zxc0++){
if (zxcclds[zxc0].className) if (zxcclds[zxc0].className.match('Tab')) zxcsecary.push(zxcclds[zxc0]);
}
var zxctabpanel=zxcES('DIV',{position:'relative',width:zxcw+'px',height:zxch+'px',border:'solid black 0px'});
zxctabpanel.tabs=[];
zxcfrm.insertBefore(zxctabpanel,zxcsecary[0]);
var zxctabw=zxcw/zxcsecary.length;
for (var zxc1=0;zxc1<zxcsecary.length;zxc1++){
zxcES(zxcsecary[zxc1],{position:'absolute',zIndex:(zxc1==0)?'2':'1',left:'0px',top:'20px',width:(zxcw)+'px',height:(zxch-20)+'px',border:'solid black 1px'},zxctabpanel);
var zxctab=zxcES('DIV',{position:'absolute',overflow:'hidden',zIndex:(zxc1==0)?'3':'0',left:(zxctabw*zxc 1+2)+'px',width:(zxctabw-5)+'px',height:'20px',backgroundColor:zxcStyleValue(zxcsecary[zxc1],'background-Color'),border:'solid black 1px',borderBottom:'solid black 0px',cursor:(document.all)?'hand':'pointer'},zxctabpanel,zxcsecary[zxc1].className.split('#')[1]);
zxctab.onclick=function(){ zxcTabSection(this); }
zxctabpanel.tabs.push([zxctab,zxcsecary[zxc1]]);
}
}

function zxcTabSection(zxctab){
var zxctabary=zxctab.parentNode.tabs;
for (var zxc0=0;zxc0<zxctabary.length;zxc0++){
zxcES(zxctabary[zxc0][0],{zIndex:(zxctabary[zxc0][0]==zxctab)?'3':'0'});
zxcES(zxctabary[zxc0][1],{zIndex:(zxctabary[zxc0][0]==zxctab)?'2':'1'});
}
}

function zxcVerify(zxcfrm){
var zxcels=zxcfrm.elements;
for (var zxc0=0;zxc0<zxcels.length-1;zxc0++){
zxcES(zxcels[zxc0],{backgroundColor:(zxcels[zxc0].value.length>0)?'white':'red'});
}
for (var zxc1=0;zxc1<zxcels.length-1;zxc1++){
if (zxcels[zxc1].value.length<1){
zxcCkTab(zxcels[zxc1]);
return false;
}
}
return true;
}

function zxcCkTab(zxcel){
var zxcsec=zxcel;
while (zxcsec.parentNode){
if (zxcsec.className.match('Tab')) break;
zxcsec=zxcsec.parentNode;
}
var zxctabary=zxcsec.parentNode.tabs;
for (var zxc0=0;zxc0<zxctabary.length;zxc0++){
if (zxctabary[zxc0][1]==zxcsec){
zxcTabSection(zxctabary[zxc0][0]);
}
}
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

function zxcStyleValue(zxcobj,zxcp){ // pass object and property, returns property value
if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace('-','')];
return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
}

/*]]>*/
</script></head>

<body onload="zxcTabForm('MyForm',200,200)">
<form id="MyForm" onsubmit="return zxcVerify(this);" action="http://www.vicsjavascripts.org.uk/">
<div class="Tab #Section 1" style="background-Color:#CC00FF;" >
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
</div>
<div class="Tab #Section 2" style="background-Color:#CCFFFF;" >
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br /><br />
<input type="text" /><br />
<input type="text" /><br />
</div>
<div class="Tab #Section 3" style="background-Color:#FFFFCC" >
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br /><br />
<input type="text" /><br />
</div>
<input type="submit" name="" value="Submit" />
</form>

</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum