Full version: jsB@nk » Email » Form Validation, Submission and Redirect
URL: https://www.javascriptbank.com/form-validation.html
This form was designed in replace of a cgi form to email with redirect. It uses both my own and modifications of other javascripts to achieve the result needed for a client with no cgi access.
Full version: jsB@nk » Email » Form Validation, Submission and Redirect
URL: https://www.javascriptbank.com/form-validation.html
<SCRIPT language=JavaScript type=text/javascript><!-- Hide script from older browsers// This script checks for numeric input only in form fields.var nr=0; function numericCheck(){ // Eg: nrl=document.<name of form>.<name of field>.value; nr1=document.signup.PHONE.value; flg=0; str=""; spc="" arw=""; for (var i=0;i<nr1.length;i++){ cmp="0123456789" tst=nr1.substring(i,i+1) if (cmp.indexOf(tst)<0){ flg++; str+=" "+tst; spc+=tst; arw+="^"; } else{arw+="_";} } if (flg!=0){ if (spc.indexOf(" ")>-1) { str+=" and/or a space"; } alert(nr1+"\r"+arw+"\rI'm sorry. This entry must " +"be a number. I found "+flg+" unacceptable characters: "+str+"."); return false; } return true; }// End Hiding --></SCRIPT><SCRIPT language=JavaScript type=text/javascript><!-- Hide script from older browsers// This script validates fields, returns error messages, submits form and redirects page// Ensure that ESSENTIAL FIELDS have been filled in.function CheckFields(pform) { // The fields are checked for blanks if ( pform.FIRSTNAME.value == "" || pform.SURNAME.value == "" || pform.EMAIL.value == "" || pform.ADDRESS.value == "" || pform.POSTCODE.value == "" || pform.PHONE.value == "" ) { alert( "Data in essential fields missing.\nPlease ensure that all fields are filled in." ); return false; }// check for valid email addresselse if ( pform.EMAIL.value.length <= 6 || pform.EMAIL.value.indexOf ('@', 0) == -1 || pform.EMAIL.value.indexOf ('.', 0) == -1){ alert("'' " + pform.EMAIL.value + " '', is not valid Email Address."); return false; } else { // If reached this far then thank user, submit form and show redirect page alert ("'Thank you for your registration submission.'" +pform.FIRSTNAME.value + " '' \nPlease wait a moment while your data is sent to our server") // put your email address in here pform.action="mailto:[email protected]"; // put the redirect url in here absolute or relative urls can be used location.href="thanks.htm"; return true; }}//End Hiding --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><TABLE width=650 align=center border=0> <TBODY> <TR> <TD> <P align=left><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>This form was designed in replace of a cgi form to email with redirect. It uses both my own and modifications of other javascripts to achieve the result needed for a client with no cgi access. </FONT></P> <P align=left><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>To demonstrate:</FONT></P> <UL> <LI><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>Fill out the form</FONT> <LI><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>A redirected page will be shown on submission of the form data,</FONT> </LI></UL> <P><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>Directions for use of this script are below the example form.</FONT></P></TD></TR></TBODY></TABLE><P align=left> </P><P><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2><!-- Start Form --><!-- The action is called in the javascript function --></FONT></P><FORM name=pform onsubmit="JavaScript:return CheckFields(this);" method=post encType=text/plain><DIV align=center><BR></DIV><TABLE height=114 cellSpacing=0 cellPadding=0 width=450 align=center border=0> <TBODY> <TR width="442"> <TD colSpan=4><IMG height=1 src="" width=442></TD></TR> <TR> <TD width=2 bgColor=#cccccc rowSpan=17><IMG height=10 src="" width=1></TD> <TD bgColor=#006600 colSpan=2 height=25> <DIV align=center><IMG height=1 src="" width=1><FONT face="Arial, Helvetica, sans-serif" color=#bddbf8 size=3><B><FONT color=#ffffff>Sample Form</FONT></B></FONT></DIV></TD> <TD width=1 bgColor=#006600 height=37 rowSpan=17></TD></TR> <TR> <TD bgColor=#d2dfce colSpan=2 height=40> <P><BR><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#000000 size=2><B> </B>Yes, add me to your mail list</FONT><FONT color=#000000>: <INPUT type=radio value=Yes name=ADD_TO_MAIL_LIST> <B>Yes <INPUT type=radio value=No name=ADD_TO_MAIL_LIST> No<BR><BR></B></FONT></P></TD></TR> <TR> <TD vAlign=center bgColor=#d2dfce colSpan=2 height=15> <DIV align=center><IMG height=1 src="" width=440 align=absMiddle></DIV></TD></TR> <TR> <TD vAlign=top width=220 bgColor=#d2dfce><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#000000 size=2><B> * </B>First name:</FONT> </TD> <TD vAlign=top width=230 bgColor=#d2dfce> <DIV align=left><INPUT size=25 name=FIRSTNAME> </DIV></TD></TR> <TR> <TD vAlign=center bgColor=#d2dfce colSpan=2 height=15> <DIV align=center><IMG height=1 src="" width=440 align=absMiddle></DIV></TD></TR> <TR> <TD vAlign=top width=220 bgColor=#d2dfce> <DIV align=left><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#000000 size=2><B> * </B>Last name: </FONT></DIV></TD> <TD vAlign=top width=230 bgColor=#d2dfce> <DIV align=left><INPUT size=25 name=SURNAME> </DIV></TD></TR> <TR> <TD vAlign=center bgColor=#d2dfce colSpan=2 height=15> <DIV align=center><IMG height=1 src="" width=440 align=absMiddle></DIV></TD></TR> <TR> <TD vAlign=top width=220 bgColor=#d2dfce> <DIV align=left><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#000000 size=2><B> * </B>Phone: </FONT></DIV></TD> <TD vAlign=top width=230 bgColor=#d2dfce> <DIV align=left><INPUT onblur=numericCheck() maxLength=10 size=25 name=PHONE> </DIV></TD></TR> <TR> <TD vAlign=center bgColor=#d2dfce colSpan=2 height=15> <DIV align=center><IMG height=1 src="" width=440 align=absMiddle></DIV></TD></TR> <TR> <TD vAlign=top width=220 bgColor=#d2dfce> <DIV align=left><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#000000 size=2><B> * </B>E-mail: </FONT></DIV></TD> <TD vAlign=top width=230 bgColor=#d2dfce> <DIV align=left><INPUT size=25 value="-- your email --" name=EMAIL> </DIV></TD></TR> <TR> <TD vAlign=center bgColor=#d2dfce colSpan=2 height=15> <DIV align=center><IMG height=1 src="" width=440 align=absMiddle></DIV></TD></TR> <TR> <TD vAlign=top width=220 bgColor=#d2dfce> <DIV align=left> <FONT face="Verdana, Arial, Helvetica, sans-serif" color=#000000 size=2><B>* </B>Address: </FONT></DIV></TD> <TD vAlign=top width=180 bgColor=#d2dfce> <DIV align=left><TEXTAREA name=ADDRESS rows="1" cols="20"></TEXTAREA> </DIV></TD></TR> <TR> <TD vAlign=center bgColor=#d2dfce colSpan=2 height=15> <DIV align=center><IMG height=1 src="" width=440 align=absMiddle></DIV></TD></TR> <TR> <TD vAlign=top width=220 bgColor=#d2dfce> <DIV align=left><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#000000 size=2><B> *</B> Postcode: </FONT></DIV></TD> <TD vAlign=top width=230 bgColor=#d2dfce> <DIV align=left><INPUT maxLength=5 size=4 name=POSTCODE> </DIV></TD></TR> <TR> <TD vAlign=center align=middle bgColor=#d2dfce colSpan=2 height=15> <DIV align=center><IMG height=1 src="" width=440 align=absMiddle></DIV></TD></TR> <TR> <TD vAlign=top align=middle bgColor=#d2dfce colSpan=2 height=12> <P align=center><FONT color=#000000><FONT color=#000000><FONT face="Verdana, Arial, Helvetica, sans-serif" size=2><BR> <SCRIPT language=JAVASCRIPT type=text/javascript><!-- Add Hidden Fieldsdocument.write("<INPUT TYPE=hidden NAME='PAGE TITLE' VALUE='"+document.title+"'>")document.write("<INPUT TYPE=hidden NAME='URL' VALUE='"+document.URL+"'>")document.write("<INPUT TYPE=hidden NAME='DOMAIN' VALUE='"+document.domain+"'>")document.write("<INPUT TYPE=hidden NAME='REFERRERED BY' VALUE='"+document.referrer+"'>")document.write("<INPUT TYPE=hidden NAME='BROWSER USED' VALUE='"+navigator.appName+" "+navigator.appVersion+"'>")End hiding --> </SCRIPT><INPUT type=submit value=Submit name=Submit> </FONT></FONT></FONT></P> <P align=center> </P></TD></TR> <TR> <TD colSpan=4><IMG height=3 src="" width=442></TD></TR></TBODY></TABLE><BR></FORM><P><TABLE width=650 align=center border=0> <TBODY> <TR> <TD> <P align=left><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>Directions for use:</FONT></P> <UL> <LI><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>Copy all of the code on this page, </FONT> <LI><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>C</FONT><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>hange the "action=mailto" to the designated email address<I> that will be receiving the formdata... <FONT color=#ff6633>(located in javascript function) </FONT></I></FONT> <LI><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>Change the redirect link to a url to be viewed after the form has been submitted.<I> Absolute or relative urls can be used <FONT color=#ff6633>(located in javascript function)</FONT></I></FONT> </LI></UL> <P><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>On submission of the form, You will receive an email to the designated email address containing the form data and the redirect will show the page you have nominated.</FONT></P> <P><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#006600 size=2>You may find this javascript useful. Enjoy :-)</FONT></P> <P> </P></TD></TR></TBODY></TABLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->