0

I am creating a form for a registration that asks the participant if they have completed pre-requisite training. There are three questions they are asked. When they click yes, the text box for the requested information is enabled, when they click no, they get a warning that they need to register first.

Here is the javascript

<SCRIPT LANGUAGE="JavaScript">
function GetSelectedItem() {

chosen = ""
len = document.register.sere.length

for (i = 0; i <len; i++) {
if (document.register.sere[i].checked) {
chosen = document.register.sere[i].value
}
}

if (chosen == "yes") {
document.register.seredate.disabled=false
document.register.serecertificate.disabled=false
}
else {
alert("YOU MUST COMPLETE THE TRAINING BEFORE REGISTERING") 
document.register.seredate.disabled=true
document.register.serecertificate.disabled=true
document.register.
}
}
</script>

<SCRIPT LANGUAGE="JavaScript">
function attrain() {
	
selected = ""
leng = document.register.attrain.length

for (i = 0; i <leng; i++) {
if (document.register.attrain[i].checked) {
selected = document.register.attrain[i].value
}
}

if (selected == "yes") {
document.register.atdate.disabled=false
document.register.atcertificate.disabled=false
}
else {
alert("YOU MUST COMPLETE THE TRAINING BEFORE REGISTERING") 
document.register.atdate.disabled=true
document.register.atcertificate.disabled=true
}
}
</script>

and here is the html for the radio buttons

<div>
<label>Have you completed the SERE 100 Training?</label><br />
<input type="radio" name="sere" value="yes" onClick=GetSelectedItem() />Yes
<br />
<label>Enter date of SERE training. Must have been withing the last 365 days.</label>
<input name="seredate" id="seredate" disabled/>
<br />
<label>Enter SERE certificate number.</label>
<input name="serecertificate" id="serecertificate" disabled/>
<br />
<input type="radio" name="sere" value="no" onClick=GetSelectedItem() />No
<br />
<br />
<br />
</div>

<div>
<label>Have you completed the Anti-Terrorism Training?</label><br />
<input type="radio" name="attrain" value="yes" onClick=attrain() />Yes
<br />
<label>Enter date of Anti-Terrorism Training. Must have been withing the last 365 days.</label>
<input name="atdate" id="atdate" disabled/>
<br />
<label>Enter Anti-Terrorism certificate number.</label>
<input name="atcertificate" id="atcertificate" disabled/>
<br />
<input type="radio" name="attrain" value="no" onClick=attrain() />No
<br />
</div>

The first one works fine (the SERE training question), however, the second one does not function at all. What am I missing to enable the second question to function like the first.

Any help is greatly appreciated.

Thanks,

3
Contributors
3
Replies
5
Views
8 Years
Discussion Span
Last Post by Airshow
0

hiii
i ain't sure...
but try changing the variable name in the second from selected to something else....
please post back if it helps or not !!

0

hey
changed the function name from attrain() to attrains()
and it works....
javascript sure acts strange at times...
try it out and let me know...

0

JZee,

Here's a different approach.

We show/hide the data fields rather than enabling/disabling; validate the whole form when the user clicks the Register button; provide error alerts and suppresses submission if anything isn't right.

Apperarance is enhanced with tables to enforce alignment and little CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
body { font-family:verdana,arial; }
form .formSection { width:420px; margin:10px 0; padding:5px; font-size:10pt; background-color:#e0e0e0; border:1px solid #999999; }
form .sectionExtras { display:none; margin:10px 0 0 0; }
form .sectionExtras td { border:1px solid #d0d0d0; }
form .sectionExtras td.label { }
form .sectionExtras td.data { text-align:right; }
form .sectionExtras td.note { margin:0; font-size:8.5pt; letter-spacing:0.3em; }
form h1 { margin:0; font-size:12pt; }
</style>

<SCRIPT LANGUAGE="JavaScript">
function show(elementID, mode){
	var el = (document.getElementById) ? document.getElementById(elementID) : document.all[elementID];
	if(el){ el.style.display = (mode) ? 'block' : 'none'; }
}
function validate(form){
	var allTrainingChecked = (form.sere[1].checked && form.attrain[1].checked);
	var sereFieldsOK = (form.seredate.value != '') && (form.serecertificate.value != '');//crude check for non empty field values
	var atFieldsOK = (form.atdate.value != '') && (form.atcertificate.value != '');//crude check for non empty field values
	if(!allTrainingChecked){
		alert("YOU MUST HAVE COMPLETED ALL THE TRAINING BEFORE REGISTERING");
		return false;//Inhibit form submission
	}
	if(!sereFieldsOK || !atFieldsOK){
		alert("YOU MUST ENTER VALID TRAINING DATES AND CERTIFICATE NUMBERS BEFORE REGISTERING");
		return false;//Inhibit form submission
	}
	return true;//If we get past all the traps, then allow the form to submit.
}

</script>
</head>

<body>

<form id="register" name="register" action="whatever.php" method="post" onsubmit="return validate(this);">
<div class="formSection">
	<h1>SERE 100 Training</h1>
	Have you completed the SERE 100 Training?
	<input id="sereN" type="radio" name="sere" value="no" onClick="show('sereExtras', 0);" checked="checked" /><label for="sereN">No</label>
	<input id="sereY" type="radio" name="sere" value="yes" onClick="show('sereExtras', 1);" /><label for="sereY">Yes</label>
	<table id="sereExtras" class="sectionExtras" width="100%">
	<tbody><tr>
	<td class="label">SERE training date.<br /><span>Must have been withing the last 365 days.</span></td>
	<td class="data"><input name="seredate" id="seredate" disabled/></td>
	</tr><tr>
	<td class="label">SERE certificate number.</td>
	<td class="data"><input name="serecertificate" id="serecertificate" disabled/></td>
	</tr></tbody>
	</table>
</div>
<div class="formSection">
	<h1>Anti-Terrorism Training</h1>
	Have you completed the Anti-Terrorism Training?
	<input id="atN" type="radio" name="attrain" value="no" onClick="show('atExtras', 0);" checked="checked" /><label for="atN">No</label>
	<input id="atY" type="radio" name="attrain" value="yes" onClick="show('atExtras', 1);" /><label for="atY">Yes</label>
	<table id="atExtras" class="sectionExtras" width="100%">
	<tbody><tr>
	<td class="label">Anti-Terrorism Training date.<br /><span>Must have been withing the last 365 days.</span></td>
	<td class="data"><input name="atdate" id="atdate"/></td>
	</tr><tr>
	<td class="label">Enter Anti-Terrorism certificate number.</td>
	<td class="data"><input name="atcertificate" id="atcertificate"/></td>
	</tr></tbody>
	</table>
</div>
<input type="submit" value="Register" />
</form>

</body>
</html>

Should give you an idea of the general principles of form layout and client-side validation.

Airshow

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.