Button and Check Box Event Handling

Button and Check Box Event Handling : Button : Form Control JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » Form Control » Button »

Button and Check Box Event Handling



<HTML>
<HEAD>
<TITLE>Button and Check Box Events</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function showResults() {
 var resultMsg=""
 if(document.survey.age[0].checked) resultMsg+="under 30, "
 if(document.survey.age[1].checked) resultMsg+="between 30 and 60, "
 if(document.survey.age[2].checked) resultMsg+="over 60, "
 if(document.survey.sex[0].checked) resultMsg+="male, "
 if(document.survey.sex[1].checked) resultMsg+="female, "
 if(document.survey.reading.checked) resultMsg+="reading, "
 if(document.survey.eating.checked) resultMsg+="eating, "
 if(document.survey.sleeping.checked) resultMsg+="sleeping, "
 
 alert(resultMsg);
}
function upperCaseResults() {
 var newResults=document.survey.results.value
 alert(newResults.toUpperCase());
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="survey">
<H2 ALIGN="CENTER">Survey Form</H2>
<P><B>Age:</B>
<INPUT TYPE="RADIO" NAME="age" VALUE="under30" ONCLICK="showResults()">Under 30
<INPUT TYPE="RADIO" NAME="age" VALUE="30to60"  ONCLICK="showResults()">30 - 60
<INPUT TYPE="RADIO" NAME="age" VALUE="over60"  ONCLICK="showResults()">Over 60</P>
<P><B>Sex: </B>
<INPUT TYPE="RADIO" NAME="sex" VALUE="male" ONCLICK="showResults()">Male
<INPUT TYPE="RADIO" NAME="sex" VALUE="female" ONCLICK="showResults()">Female</P>
<P><B>Interests: </B>
<INPUT TYPE="CHECKBOX" NAME="reading" ONCLICK="showResults()"> Reading
<INPUT TYPE="CHECKBOX" NAME="eating"  ONCLICK="showResults()"> Eating
<INPUT TYPE="CHECKBOX" NAME="sleeping" ONCLICK="showResults()"> Sleeping</P>
<P>
<INPUT TYPE="BUTTON" NAME="makeUpper" VALUE="To Upper Case" ONCLICK="upperCaseResults()"></P>
<P><B>Results: </B><INPUT TYPE="TEXT" NAME="results" SIZE="50"></P>
<INPUT TYPE="SUBMIT" NAME="submit" VALUE="Submit" ONCLICK='return confirm("Sure?")'>
<INPUT TYPE="RESET" NAME="reset" ONCLICK='return confirm("Sure?")'>
</FORM>
</BODY>
</HTML>