JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



JavaScript Survey

With this survey, you can have users answer a number of questions and have the results e-mailed to you. QUESTION #1 QUESTION #2 QUESTION #3 Any other comments?


Insert into <HEAD>
<script language="JavaScript"> <!-- Hide from old browsers function survey() { var i = 0 var index1=document.form1.answer1.selectedIndex var index2=document.form1.answer2.selectedIndex var index3=document.form1.answer3.selectedIndex // This is where the first addition would go var result1=document.form1.answer1.options[index1].value var result2=document.form1.answer2.options[index2].value var result3=document.form1.answer3.options[index3].value // This is where you insert the second addition var comments=document.form1.comments.value if (result1!=0 && result2!=0 && result3!=0){ // Thrid addition goes here document.mail.question1.value = result1 document.mail.question2.value = result2 document.mail.question3.value = result3 // Finally the forth addition goes here document.mail.comment.value = comments return true;} else { alert("A question was not answered"); return false;} } // --> </script>

Insert into <BODY>
<FORM NAME="form1"> <STRONG>QUESTION #1</STRONG> <SELECT NAME="answer1" SIZE=1> <OPTION SELECTED VALUE="0">-- Choose an answer -- <OPTION VALUE="ANSWER #1">ANSWER #1 <OPTION VALUE="ANSWER #2">ANSWER #2 <OPTION VALUE="ANSWER #3">ANSWER #3 <OPTION VALUE="ANSWER #4">ANSWER #4 </SELECT><BR><BR> <STRONG>QUESTION #2</STRONG> <SELECT NAME="answer2" SIZE=1> <OPTION SELECTED VALUE="0">-- Choose an answer -- <OPTION VALUE="ANSWER #1">ANSWER #1 <OPTION VALUE="ANSWER #2">ANSWER #2 <OPTION VALUE="ANSWER #3">ANSWER #3 <OPTION VALUE="ANSWER #4">ANSWER #4 </SELECT><BR><BR> <STRONG>QUESTION #3</STRONG> <SELECT NAME="answer3" SIZE=1> <OPTION SELECTED VALUE="0">-- Choose an answer -- <OPTION VALUE="ANSWER #1">ANSWER #1 <OPTION VALUE="ANSWER #2">ANSWER #2 <OPTION VALUE="ANSWER #3">ANSWER #3 <OPTION VALUE="ANSWER #4">ANSWER #4 </SELECT><BR><BR> <STRONG>Any other comments?</STRONG><BR> <TEXTAREA NAME="comments" ROWS=5 COLS=50></TEXTAREA> </FORM> <FORM NAME="mail" method="POST" action="mailto:YOUR EMAIL ADDRESS?subject=Servey Results" onSubmit="return survey()" enctype="multipart/form-data"> <input type=hidden name="question1"> <input type=hidden name="question2"> <input type=hidden name="question3"> <input type=hidden name="comment"> <INPUT TYPE="SUBMIT" VALUE="Submit Survey"> </FORM>

Other Options
Part 1: The following lines go in your <head></head> tag. This part of the code determines if the questions are answered and then gets it ready to be e-mailed. <script language="JavaScript"> <!-- Hide from old browsers function survey() { var i = 0 var index1=document.form1.answer1.selectedIndex var index2=document.form1.answer2.selectedIndex var index3=document.form1.answer3.selectedIndex // This is where the first addition would go var result1=document.form1.answer1.options[index1].value var result2=document.form1.answer2.options[index2].value var result3=document.form1.answer3.options[index3].value // This is where you insert the second addition var comments=document.form1.comments.value if (result1!=0 && result2!=0 && result3!=0){ // Thrid addition goes here document.mail.question1.value = result1 document.mail.question2.value = result2 document.mail.question3.value = result3 // Finally the forth addition goes here document.mail.comment.value = comments return true;} else { alert("A question was not answered"); return false;} } // --> </script> Part 2: These lines are the questions and the comments. They can go anywhere in your page. Change the values: QUESTION#, ANSWER#, YOUR E-MAIL ADDRESS. <FORM NAME="form1"> <STRONG>QUESTION #1</STRONG> <SELECT NAME="answer1" SIZE=1> <OPTION SELECTED VALUE="0">-- Choose an answer -- <OPTION VALUE="ANSWER #1">ANSWER #1 <OPTION VALUE="ANSWER #2">ANSWER #2 <OPTION VALUE="ANSWER #3">ANSWER #3 <OPTION VALUE="ANSWER #4">ANSWER #4 </SELECT><BR><BR> <STRONG>QUESTION #2</STRONG> <SELECT NAME="answer2" SIZE=1> <OPTION SELECTED VALUE="0">-- Choose an answer -- <OPTION VALUE="ANSWER #1">ANSWER #1 <OPTION VALUE="ANSWER #2">ANSWER #2 <OPTION VALUE="ANSWER #3">ANSWER #3 <OPTION VALUE="ANSWER #4">ANSWER #4 </SELECT><BR><BR> <STRONG>QUESTION #3</STRONG> <SELECT NAME="answer3" SIZE=1> <OPTION SELECTED VALUE="0">-- Choose an answer -- <OPTION VALUE="ANSWER #1">ANSWER #1 <OPTION VALUE="ANSWER #2">ANSWER #2 <OPTION VALUE="ANSWER #3">ANSWER #3 <OPTION VALUE="ANSWER #4">ANSWER #4 </SELECT><BR><BR> <STRONG>Any other comments?</STRONG><BR> <TEXTAREA NAME="comments" ROWS=5 COLS=50></TEXTAREA> </FORM> <FORM NAME="mail" method="POST" action="mailto:YOUR EMAIL ADDRESS?subject=Servey Results" onSubmit="return survey()" enctype="multipart/form-data"> <input type=hidden name="question1"> <input type=hidden name="question2"> <input type=hidden name="question3"> <input type=hidden name="comment"> <INPUT TYPE="SUBMIT" VALUE="Submit Survey"> </FORM> -------------------------------------------------------------------------------- Making Additions Adding Extra Answers To add a 5th answer to any of the drop down forms, you would add this line <OPTION VALUE="ANSWER #5">ANSWER #5 So now one of the drop down menus would look like this <STRONG>QUESTION #2</STRONG> <SELECT NAME="answer2" SIZE=1> <OPTION SELECTED VALUE="0">-- Choose an answer -- <OPTION VALUE="ANSWER #1">ANSWER #1 <OPTION VALUE="ANSWER #2">ANSWER #2 <OPTION VALUE="ANSWER #3">ANSWER #3 <OPTION VALUE="ANSWER #4">ANSWER #4 <OPTION VALUE="ANSWER #5">ANSWER #5 </SELECT><BR><BR> Adding More Questions First, you need to insert a pull down menu. Right now I have three. To add a fouth, you would insert these lines after the third menu and before the Comments Textarea. You must change the SELECT NAME to "answer4" (or "answer5" if you wanted 5 questions). <STRONG>QUESTION #4</STRONG> <SELECT NAME="answer4" SIZE=1> <OPTION SELECTED VALUE="0">-- Choose an answer -- <OPTION VALUE="ANSWER #1">ANSWER #1 <OPTION VALUE="ANSWER #2">ANSWER #2 <OPTION VALUE="ANSWER #3">ANSWER #3 <OPTION VALUE="ANSWER #4">ANSWER #4 </SELECT><BR><BR> Next you need to add this line to the last form named "mail" <input type=hidden name="question4"> So now it would look like this. <FORM NAME="mail" method="POST" action="mailto:YOUR EMAIL ADDRESS?subject=Servey Results" onSubmit="return survey()" enctype="multipart/form-data"> <input type=hidden name="question1"> <input type=hidden name="question2"> <input type=hidden name="question3"> <input type=hidden name="question4"> <input type=hidden name="comment"> <INPUT TYPE="SUBMIT" VALUE="Submit Survey"> </FORM> Finally you need to edit the script that goes inside the HEAD tag. These are the lines that need to be added IN ORDER! See the acctual script to see where the additions goes (they are marked by a "//" in front of them). var index4=document.form1.answer4.selectedIndex and var result4=document.form1.answer4.options[index4].value and if (result1!=0 && result2!=0 && result3!=0 && result4!=0){ and document.mail.question4.value = result4 Now, that script should look like this <script language="JavaScript"> <!-- Hide from old browsers // Created by Doug Popeney (easyjav@easyjavascipt.com) // JavaScript Made Easy!! - http://www.easyjavascript.com function survey() { var i = 0 var index1=document.form1.answer1.selectedIndex var index2=document.form1.answer2.selectedIndex var index3=document.form1.answer3.selectedIndex var index4=document.form1.answer4.selectedIndex // This is where the first addition would go var result1=document.form1.answer1.options[index1].value var result2=document.form1.answer2.options[index2].value var result3=document.form1.answer3.options[index3].value var result4=document.form1.answer4.options[index4].value // This is where you insert the second addition var comments=document.form1.comments.value if (result1!=0 && result2!=0 && result3!=0 && result4!=0){ // Thrid addition goes here document.mail.question1.value = result1 document.mail.question2.value = result2 document.mail.question3.value = result3 document.mail.question4.value = result4 // Finally the forth addition goes here document.mail.comment.value = comments return true;} else { alert("A question was not answered"); return false;} } // --> </script>