»
EnglishFrenchVietnamese

Print - Form Validation, Submission and Redirect - JavaScriptBank.com

Full version: jsB@nk » Email » Form Validation, Submission and Redirect
URL: http://www.javascriptbank.com/form-validation.html

Form Validation, Submission and Redirect © JavaScriptBank.comThis 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: http://www.javascriptbank.com/form-validation.html



JavaScript
<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:someone@somewhere.com";     // 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-->


HTML
<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>&nbsp;</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>&nbsp;</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>&nbsp;&nbsp;*&nbsp;</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>&nbsp;&nbsp;*&nbsp;</B>Last name:&nbsp;&nbsp;</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>&nbsp;&nbsp;*&nbsp;</B>Phone:&nbsp;&nbsp;</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>&nbsp;&nbsp;*&nbsp;</B>E-mail:&nbsp;&nbsp;</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>&nbsp;&nbsp;<FONT       face="Verdana, Arial, Helvetica, sans-serif" color=#000000 size=2><B>*       </B>Address:&nbsp;&nbsp;</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>&nbsp;&nbsp;*</B>       Postcode:&nbsp;&nbsp;</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>&nbsp;</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 &quot;action=mailto&quot; 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>&nbsp;</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-->