alyse said:
Using Javascript how do I validate a function so a alert box displays
if the submit button is pushed without at least one of the
radio/option buttons isn't selected?
Here is a form re a Bus tour which tests that at least one bus is selected.
The images won't work of course, but the rest should.
If the No box is checked, then no buses may be selected. If the Yes box is
checked, then no more than 4 may be selected. It activates as soon as you
mouseover the Submit button. If no alert comes up, then the Submit can be
pressed.
I hope this suits your purpose.
<html>
<head>
<script type="text/javascript">
function testform()
{
// Parameters to function
var maxarr = 5 // Increase if more buses are available to select from
var maxbuses = 4 // Increase if more buses can be selected
// Internal variables
var yesreply = '' , noreply = '' , no_buses = 0
with (document.form1)
{
yesreply = yes.checked
noreply = no.checked
for (i = 1 ; i <= maxarr ; i++)
no_buses += (elements['Bus' + i].checked) ? 1 : 0
if (yesreply == noreply)
{ alert ('Reply must be Yes or No')
return }
else
Joining.value = yesreply ? 'Yes' : 'No'
}
if (noreply && no_buses > 0)
{ alert('No reply is ' + noreply + ' but no of buses=' + no_buses)
return }
if (yesreply && no_buses == 0)
{ alert('Yes reply is ' + yesreply + ' but no of buses=' + no_buses)
return }
if (no_buses > maxbuses )
{ alert('You have selected ' + no_buses + ' buses. The maximum allowed
is ' + maxbuses + ' buses.')
return }
}
// --------------------
function sendform()
{
with (document.form1)
{
var body = ''
var i = elements.length , j = 0
while (i-- > 2) // drop last two elements
{
var text = (elements[j].checked) ? 'Yes' : elements[j].value
var tname = elements[j].name
if (text != 'on' && tname != 'yes' && tname != 'no')
{
body += tname.replace(/Bus/,"Bus%20") + ": "
if (tname == "Comment")
body += '%0d%0a' // line break before comment text
body += text + '%0d%0a' // line break after each line
}
j += 1
} // end while
}
window.location = "mailto:" + "me" + "@" + "mymail" + ".com.au"
+ "?subject=Response%20from%20Bus%20Survey"
+ "&body=" + body
}
// --------------------
</script>
</head>
<!-- ================================================ -->
<body onload="">
<noscript>
This site requires Javascript enabled<br />
</noscript>
<div id="maindiv" align="center">
<div style="border:1px solid #999999; width:60%;
background-color:#F2F4FA;">
<form name="form1" action="">
<div style="background-color:#DBE0F5; padding:3px; font:75% arial;">
</div>
<div style="padding:10px; font:75% Arial; text-align:left;">
<p>
Hi all,<br />
Please express your interest below<br />
</p>
<p>
Name:<br/>
<input type="text" id="Name" value="Insert name" size="40"
onfocus="if (this.value=='Insert name'){this.value='';};return
false;"
onblur="if (this.value==''){this.value='Insert name';return
false;}"/><br/>
Email:<br/>
<input type="text" id="Email" value="Insert e-mail address" size="40"
onfocus="if (this.value=='Insert e-mail
address'){this.value='';};return false;"
onblur="if (this.value==''){this.value='Insert e-mail
address';return false;}"/><br/>
Do you want to join? <br/>
<input type="checkbox" id="yes" />Yes <br/>
<input type="checkbox" id="no" />No <br/>
<input type="hidden" id="Joining" size="3" />
Which buses do you want to see:<br>
There will be a maxiumum of 4 buses to select from<br/>
Bus 1:<input type="checkbox" id="Bus1" />
<img src ="images/deanes/Deanes Airliner bus DBL126 05-11-11.JPG"
width="60" height="45">Deanes Airliner bus DBL126
<br/>
Bus 2:<input type="checkbox" id="Bus2" />
<img src ="images/deanes/Deanes mercedes bus 26 ex-Action 656 bus
Civic 3 4-4-05.JPG" width="60" height="40">Deanes mercedes bus 26 ex-Action
656
<br/>
Bus 3:<input type="checkbox" id="Bus3" />
<img src ="images/deanes/Deanes MO 4304 ACT 657 05-11-08-1.JPG"
width="60" height="45">Deanes MO 4304 ACT 657
<br/>
Bus 4:<input type="checkbox" id="Bus4" />
<img src ="images/deanes/Deanes Hino bus DBL 095 Jamison-2
24-06-05.JPG" width="60" height="40">Deanes Hino bus DBL 095
<br/>
Bus 5:<input type="checkbox" id="Bus5" />
<img src ="images/deanes/Deanes bus MO4568 05-11-11-2.JPG" width="60"
height="40">Deanes bus MO4568
<br/>
</p>
Enter Comment:<br/>
<textarea id="Comment" rows="10" cols="100"
style="font:100% Arial;">Enter your comment in
here</textarea><br />
</div>
<div align="center" style="background-color:#DBE0F5; padding:3px;
font:12px arial;">
<input type="button" id="submit" value=" Send "
onmouseover="testform()" onclick="sendform()" />
<input type="reset" id="reset" value=" Clear "/>
</div>
</form>
</div>
</div> <!-- end id="maindiv" -->
</body>
</html>
