I have created a form with show/hide on a couple of fields. However, this hidden info is not posting back when I click submit. Can someone help?
Source code
JavaScript document
Source code
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Show Hide</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="file:///P|/showHide.js"></script>
<link href="file:///P|/IntoActionCSS.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Contact details-->
<div class="substep"><span class="subHeading">Step 1 of 5: Personal details</span></div>
Please ensure you have your manager's approval for the content/functionality request prior to submitting this form.<br clear="all" />
<br clear="all" />
<!--Name-->
<div class="formlabel"><strong>Name:</strong></div>
<div class="formcontent"><input id="name" onblur="design_validate_re(/\S+/,this,'Cannot be blank');" title="Name" style="TEXT-DECORATION: none" alt="Name" maxlength="150" name="name" ektdesignns_validation="string-req" ektdesignns_basetype="text" ektdesignns_validate="re:/\S+/" ektdesignns_invalidmsg="Cannot be blank" ektdesignns_name="name" ektdesignns_caption="Name" ektdesignns_nodetype="element" /></div>
<br clear="all" />
<!--House number-->
<div class="formlabel"><strong>House number/name:</strong></div>
<div class="formcontent"><input id="HouseName" onblur="design_validate_re(/\S+/,this,'Cannot be blank');" title="HouseName" style="FONT-WEIGHT: normal; FONT-STYLE: normal; TEXT-ALIGN: left; TEXT-DECORATION: none" alt="HouseName" maxlength="100" name="HouseName" ektdesignns_validation="string-req" ektdesignns_basetype="text" ektdesignns_validate="re:/\S+/" ektdesignns_invalidmsg="Cannot be blank" ektdesignns_name="HouseName" ektdesignns_caption="HouseName" ektdesignns_nodetype="element" /></div>
<br clear="all" />
<!--Street name-->
<div class="formlabel"><strong>Street:</strong></div>
<div class="formcontent"><input id="Street" onblur="design_validate_re(/\S+/,this,'Cannot be blank');" title="Street" style="FONT-WEIGHT: normal; FONT-STYLE: normal; TEXT-ALIGN: left; TEXT-DECORATION: none" alt="Street" maxlength="2000" name="Street" ektdesignns_validation="string-req" ektdesignns_basetype="text" ektdesignns_validate="re:/\S+/" ektdesignns_invalidmsg="Cannot be blank" ektdesignns_name="Street" ektdesignns_caption="Street" ektdesignns_nodetype="element" ektdesignns_normalize="re:/(\-?(\d*\.\d{1,2}|\d+))/" /></div>
<br clear="all" />
<!--Location-->
<div class="formlabel"><strong>Town/City:</strong></div>
<div class="formcontent"><input id="Location" onblur="design_validate_re(/\S+/,this,'Cannot be blank');" title="Location" style="FONT-WEIGHT: normal; FONT-STYLE: normal; TEXT-ALIGN: left; TEXT-DECORATION: none" alt="Location" maxlength="100" name="Location" ektdesignns_validation="string-req" ektdesignns_basetype="text" ektdesignns_validate="re:/\S+/" ektdesignns_invalidmsg="Cannot be blank" ektdesignns_name="Location" ektdesignns_caption="Location" ektdesignns_nodetype="element" /></div>
<br clear="all" />
<!--Postcode-->
<div class="formlabel"><strong>Postcode:</strong></div>
<div class="formcontent"><input id="Postcode" onblur="design_validate_re(/\S+/,this,'Cannot be blank');" title="Postcode" style="FONT-WEIGHT: normal; FONT-STYLE: normal; TEXT-ALIGN: left; TEXT-DECORATION: none" alt="Postcode" maxlength="100" name="Postcode" ektdesignns_validation="string-req" ektdesignns_basetype="text" ektdesignns_validate="re:/\S+/" ektdesignns_invalidmsg="Cannot be blank" ektdesignns_name="Postcode" ektdesignns_caption="Postcode" ektdesignns_nodetype="element" /></div>
<br clear="all" />
<!--Telephone-->
<div class="formlabel"><strong>Telephone:</strong></div>
<div class="formcontent"><input id="Telephone" onblur="design_validate_re(/^\d+$/,this,'Non-negative whole number (required)');" title="Telephone" style="FONT-WEIGHT: normal; FONT-STYLE: normal; TEXT-ALIGN: left; TEXT-DECORATION: none" alt="Telephone" maxlength="100" name="Telephone" ektdesignns_validation="nonNegInt-req" ektdesignns_basetype="number" ektdesignns_validate="re:/^\d+$/" ektdesignns_invalidmsg="Non-negative whole number (required)" ektdesignns_name="Telephone" ektdesignns_caption="Telephone" ektdesignns_nodetype="element" /></div>
<br clear="all" />
<br clear="all" />
<!--Request Details--><!--Website-->
<div class="substep"><span class="subHeading">Step 2 of 5: Employee details</span></div>
<div class="formlabel"><strong>Department:</strong></div>
<div class="formcontent"><select id="Website" title="First item is not a valid selection." style="WIDTH: 156px" name="Website" ektdesignns_name="Website" ektdesignns_caption="Department" ektdesignns_nodetype="element">
<option value="Please select" selected="selected">Please select</option>
<option value="Business Services">Business Services</option>
<option value="Commercial Services">Commercial Services</option>
<option value="Corporate Comms">Corporate Comms</option>
<option value="Corporate Services">Corporate Services</option>
<option value="Customer Service">Customer Service</option>
<option value="Dev and Technology">Dev and Technology</option>
<option value="Finance">Finance</option>
<option value="HR">HR</option>
<option value="Legal">Legal</option>
<option value="Network">Network</option>
<option value="Operations">Operations</option>
<option value="Procurement">Procurement</option>
<option value="Security">Security</option>
<option value="SHE">SHE</option>
</select></div>
<br clear="all" />
<div class="formlabel"><strong>Manager:</strong></div>
<div class="formcontent"><input id="Manager" onblur="design_validate_re(/\S+/,this,'Cannot be blank');" title="Manager" style="FONT-WEIGHT: normal; FONT-STYLE: normal; TEXT-ALIGN: left; TEXT-DECORATION: none" alt="Manager" maxlength="100" name="Manager" ektdesignns_validation="string-req" ektdesignns_basetype="text" ektdesignns_validate="re:/\S+/" ektdesignns_invalidmsg="Cannot be blank" ektdesignns_name="Manager" ektdesignns_caption="Manager" ektdesignns_nodetype="element" /></div>
<br clear="all" />
<div class="formlabel"><strong>Payroll number:</strong></div>
<div class="formcontent"><input id="Payroll number" onblur="design_validate_re(/\S+/,this,'Cannot be blank');" title="Payroll number" style="FONT-WEIGHT: normal; FONT-STYLE: normal; TEXT-ALIGN: left; TEXT-DECORATION: none" alt="Payroll number" maxlength="100" name="Payroll number" ektdesignns_validation="string-req" ektdesignns_basetype="text" ektdesignns_validate="re:/\S+/" ektdesignns_invalidmsg="Cannot be blank" ektdesignns_name="Payroll" ektdesignns_caption="Payroll number" ektdesignns_nodetype="element" /></div>
<br clear="all" />
<br clear="all" />
<div class="substep"><span class="subHeading">Step 3 of 5: Charity details</span></div>
<!--Charity Name-->
<div class="formlabel"><strong>Charity Name:</strong></div>
<div class="formcontent"><input id="charityName" onblur="design_validate_re(/\S+/,this,'Cannot be blank');" title="CharityName" style="TEXT-DECORATION: none" alt="Charity name" maxlength="150" name="CharityName" ektdesignns_validation="string-req" ektdesignns_basetype="text" ektdesignns_validate="re:/\S+/" ektdesignns_invalidmsg="Cannot be blank" ektdesignns_name="Charity name" ektdesignns_caption="Name" ektdesignns_nodetype="element" /></div>
<br clear="all" />
<!--Registered number-->
<div class="formlabel"><strong>Registered number:</strong></div>
<div class="formcontent"><input id="RegisteredNumber" onblur="design_validate_re(/\S+/,this,'Cannot be blank');" title="RegisteredNumber" style="FONT-WEIGHT: normal; FONT-STYLE: normal; TEXT-ALIGN: left; TEXT-DECORATION: none" alt="Registered number" maxlength="100" name="RegisteredNumber" ektdesignns_validation="string-req" ektdesignns_basetype="text" ektdesignns_validate="re:/\S+/" ektdesignns_invalidmsg="Cannot be blank" ektdesignns_name="RegisteredNumber" ektdesignns_caption="RegisteredNumber" ektdesignns_nodetype="element" /></div>
<br clear="all" />
<!--Street name-->
<div class="formlabel"><strong>Aims:</strong></div>
<div class="formcontent"><textarea id="Aims" title="Field 1" style="MARGIN: 2px; WIDTH: 277px; HEIGHT: 112px" name="Aims" cols="29" ektdesignns_name="Aims" ektdesignns_caption="Aims" ektdesignns_nodetype="element" ektdesignns_normalize="re:/(\-?(\d*\.\d{1,2}|\d+))/" alt="Aims"></textarea></div>
<br clear="all" />
<br clear="all" />
<div class="substep"><span class="subHeading">Step 4 of 5: What type of funding is needed?</span></div>
<!--What type of funding is needed?-->
<ektdesignns_choices id="Type_of_funding" ektdesignns_name="Type_of_funding" name="Type_of_funding" ektdesignns_caption="Type of funding" title="Field 1" ektdesignns_nodetype="element">
<ol class="design_list_vertical" title="Field 1" contenteditable="false" unselectable="on" ektdesignns_maxoccurs="1" ektdesignns_minoccurs="0">
<li>
<div><a onclick="sweeptoggle('attach'); expandcontent (this,'funds')" href="#"><input id="IDA67C8" title="Matching funds" type="radio" value="Matching funds" name="Type_of_funding" ektdesignns_nodetype="item" /><label contenteditable="true" for="IDA67C8" unselectable="off">Matching funds</label></a></div>
<div class="showHideHeader">
<div class="switchcontent" id="funds" style="DISPLAY: none">
<div class="substep">Describe how you raised the funds</div>
<div class="formlabel"><textarea id="describe" onblur="design_validate_js('this.text.length <= 500',this,'Allow maximum of 500 characters');" title="Describe" style="MARGIN: 2px; WIDTH: 289px; HEIGHT: 141px" name="describe" cols="29" ektdesignns_validation="max500Chars" ektdesignns_basetype="textbox" ektdesignns_validate="js:this.text.length <= 500" ektdesignns_invalidmsg="Allow maximum of 500 characters" ektdesignns_name="describe" ektdesignns_caption="Description" ektdesignns_nodetype="element"></textarea></div>
<br clear="all" />
<!--When did you do this-->
<div class="formlabel"><strong>When did you do this?:</strong></div>
<div class="formcontent"><input id="when" onblur="design_validate_re(/\S+/,this,'Cannot be blank');" title="when" style="FONT-WEIGHT: normal; FONT-STYLE: normal; TEXT-ALIGN: left; TEXT-DECORATION: none" alt="when" maxlength="100" name="when" ektdesignns_validation="string-req" ektdesignns_basetype="text" ektdesignns_validate="re:/\S+/" ektdesignns_invalidmsg="Cannot be blank" ektdesignns_name="when" ektdesignns_caption="when" ektdesignns_nodetype="element" /></div>
<br clear="all" />
<br clear="all" />
<!--How much did you rasie-->
<div class="formlabel"><strong>How much did you raise?:</strong></div>
<div class="formcontent"><input id="raised" onblur="design_validate_re(/\S+/,this,'Cannot be blank');" title="raised" style="FONT-WEIGHT: normal; FONT-STYLE: normal; TEXT-ALIGN: left; TEXT-DECORATION: none" alt="raised" maxlength="100" name="raised" ektdesignns_validation="string-req" ektdesignns_basetype="text" ektdesignns_validate="re:/\S+/" ektdesignns_invalidmsg="Cannot be blank" ektdesignns_name="raised" ektdesignns_caption="raised" ektdesignns_nodetype="element" /></div>
<br clear="all" />
<br clear="all" />
</div>
</div>
</li>
<li>
<div><a onclick="sweeptoggle('matchingtime'); expandcontent (this,'matchingtime')" href="#"><input id="ID720E6" title="Matching time funds" type="radio" value="Matching time funds" name="Type_of_funding" ektdesignns_nodetype="item" /><label contenteditable="true" for="ID720E6" unselectable="off">Matching time funds</label></a></div>
<div class="showHideHeader">
<div class="switchcontent" id="matchingtime" style="DISPLAY: none">
<div class="substep">What is your involvement with this Charity?</div>
<div class="formlabel"><textarea id="involvement" onblur="design_validate_js('this.text.length <= 500',this,'Allow maximum of 500 characters');" title="involvement" style="MARGIN: 2px; WIDTH: 289px; HEIGHT: 141px" name="involvement" cols="29" ektdesignns_validation="max500Chars" ektdesignns_basetype="textbox" ektdesignns_validate="js:this.text.length <= 500" ektdesignns_invalidmsg="Allow maximum of 500 characters" ektdesignns_name="involvement" ektdesignns_caption="involvement" ektdesignns_nodetype="element"></textarea></div>
<br clear="all" />
<!--How many hours have you worked-->
<div class="formlabel"><strong>How many hours have you worked on a voluntary basis this year?:</strong></div>
<div class="formcontent"><input id="hours" onblur="design_validate_re(/\S+/,this,'Cannot be blank');" title="hours" style="FONT-WEIGHT: normal; FONT-STYLE: normal; TEXT-ALIGN: left; TEXT-DECORATION: none" alt="hours" maxlength="100" name="hours" ektdesignns_validation="string-req" ektdesignns_basetype="text" ektdesignns_validate="re:/\S+/" ektdesignns_invalidmsg="Cannot be blank" ektdesignns_name="hours" ektdesignns_caption="hours" ektdesignns_nodetype="element" /></div>
<br clear="all" />
<br clear="all" />
</div>
</div>
</li>
<li>
<div><a onclick="sweeptoggle('grant'); expandcontent (this,'grant')" href="#"><input id="ID720E6" title="grant" type="radio" value="grant" name="Type_of_funding" ektdesignns_nodetype="item" /><label contenteditable="true" for="ID720E6" unselectable="off">Grant</label></a></div>
<div class="showHideHeader">
<div class="switchcontent" id="grant" style="DISPLAY: none">
<div class="substep">What is your involvement with this Charity?</div>
<div class="formlabel"><textarea id="yourinvolvement" onblur="design_validate_js('this.text.length <= 500',this,'Allow maximum of 500 characters');" title="yourinvolvement" style="MARGIN: 2px; WIDTH: 289px; HEIGHT: 141px" name="yourinvolvement" cols="29" ektdesignns_validation="max500Chars" ektdesignns_basetype="textbox" ektdesignns_validate="js:this.text.length <= 500" ektdesignns_invalidmsg="Allow maximum of 500 characters" ektdesignns_name="yourinvolvement" ektdesignns_caption="yourinvolvement" ektdesignns_nodetype="element"></textarea></div>
<br clear="all" />
<!--What is the purpose of the grant-->
<div class="formlabel"><strong>What is the purpose of the grant?:</strong></div>
<div class="formcontent"><input id="purpose" onblur="design_validate_re(/\S+/,this,'Cannot be blank');" title="purpose" style="FONT-WEIGHT: normal; FONT-STYLE: normal; TEXT-ALIGN: left; TEXT-DECORATION: none" alt="purpose" maxlength="100" name="purpose" ektdesignns_validation="string-req" ektdesignns_basetype="text" ektdesignns_validate="re:/\S+/" ektdesignns_invalidmsg="Cannot be blank" ektdesignns_name="purpose" ektdesignns_caption="purpose" ektdesignns_nodetype="element" /></div>
<br clear="all" />
<br clear="all" />
<!--Amount claimed-->
<div class="formlabel"><strong>Amount claimed?:</strong></div>
<div class="formcontent"><input id="amount" onblur="design_validate_re(/\S+/,this,'Cannot be blank');" title="amount" style="FONT-WEIGHT: normal; FONT-STYLE: normal; TEXT-ALIGN: left; TEXT-DECORATION: none" alt="amount" maxlength="100" name="purpose" ektdesignns_validation="string-req" ektdesignns_basetype="text" ektdesignns_validate="re:/\S+/" ektdesignns_invalidmsg="Cannot be blank" ektdesignns_name="amount" ektdesignns_caption="amount" ektdesignns_nodetype="element" /></div>
</div>
</div>
</li>
</ol>
</ektdesignns_choices>
<!--Business justification-->
<div class="substep"><span class="subHeading">Step 5 of 5: Disclaimer</span></div>
<input id="Disclaimer" title="Field 1" type="checkbox" name="Disclaimer" ektdesignns_name="Disclaimer" ektdesignns_caption="Disclaimer" ektdesignns_nodetype="element" /> I certify that the sum stated above has been raised or volunteer hours have been given for the benefit of my charity. To the best of my knowledge all other information is accurate.<br clear="all" />
<br clear="all" />
<!--Submit/Reset-->
<div class="buttons"><a href="mailto:sgnnet@sgn.co.uk"><input type="submit" value="Submit" name="btnsubmit" /></a> <input class="btnreset" type="reset" value="Reset" name="btnreset" /></div>
</body>
</html>
Code:
// JavaScript Document
var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)
//var testsymbol='- ' //HTML for test symbol.
//var expandsymbol='+ ' //HTML for expand symbol.
if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}
function getElementbyClass(rootobj, classname){
var temparray=new Array()
var inc=0
var rootlength=rootobj.length
for (i=0; i<rootlength; i++){
if (rootobj[i].className==classname)
temparray[inc++]=rootobj[i]
}
return temparray
}
function sweeptoggle(ec){
var thestate=(ec=="expand")? "block" : "none"
var inc=0
while (ccollect[inc]){
ccollect[inc].style.display=thestate
inc++
}
revivestatus()
}
function testcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}
function expandcontent(curobj, cid){
var spantags=curobj.getElementsByTagName("SPAN")
var showstateobj=getElementbyClass(spantags, "showstate")
if (ccollect.length>0){
if (collapseprevious=="yes")
testcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
if (showstateobj.length>0){ //if "showstate" span exists in header
if (collapseprevious=="no")
showstateobj[0].innerHTML=(document.getElementById(cid).style.display=="block")? testsymbol : expandsymbol
else
revivestatus()
}
}
}
function revivecontent(){
testcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}
function revivestatus(){
var inc=0
while (statecollect[inc]){
if (ccollect[inc].style.display=="block")
statecollect[inc].innerHTML=testsymbol
else
statecollect[inc].innerHTML=expandsymbol
inc++
}
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}
function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}
document.cookie=window.location.pathname+"="+selectedItem
}
function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
var alltags=document.all? document.all : document.getElementsByTagName("*")
ccollect=getElementbyClass(alltags, "switchcontent")
statecollect=getElementbyClass(alltags, "showstate")
if (enablepersist=="on" && ccollect.length>0){
document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0"
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
if (ccollect.length>0 && statecollect.length>0)
revivestatus()
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate
Comment