468,119 Members | 1,954 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,119 developers. It's quick & easy.

Form to run a JS Mandatory check before toggling <div> tag..

57
Let me explain....

I have a form (most of which you guys have helped me with!!). The initial problem I was having is that it was holding the data in the fields after submit, I resolved this by putting the whole form in a set of <div> tags and the form now collapses after they click submit. Perfect!!

But, have set some mandatory fields using java, and I need to it validate the these fields before it collapses the form - otherwise it says you haven't completed the form but the form collapses and the user cannot amend.

Here's the code..

First the JS for the mandatory fields...

Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript">
  2. <!--
  3.  
  4. function formCheck(formobj){
  5.     // Enter name of mandatory fields
  6.     var fieldRequired = Array("Manager_Name", "Manager_Email");
  7.     // Enter field description to appear in the dialog box
  8.     var fieldDescription = Array("First Name", "Last Name");
  9.     // dialog message
  10.     var alertMsg = "Please complete the following fields:\n";
  11.  
  12.     var l_Msg = alertMsg.length;
  13.  
  14.     for (var i = 0; i < fieldRequired.length; i++){
  15.         var obj = formobj.elements[fieldRequired[i]];
  16.         if (obj){
  17.             switch(obj.type){
  18.             case "select-one":
  19.                 if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
  20.                     alertMsg += " - " + fieldDescription[i] + "\n";
  21.                 }
  22.                 break;
  23.             case "select-multiple":
  24.                 if (obj.selectedIndex == -1){
  25.                     alertMsg += " - " + fieldDescription[i] + "\n";
  26.                 }
  27.                 break;
  28.             case "text":
  29.             case "textarea":
  30.                 if (obj.value == "" || obj.value == null){
  31.                     alertMsg += " - " + fieldDescription[i] + "\n";
  32.                 }
  33.                 break;
  34.             default:
  35.             }
  36.             if (obj.type == undefined){
  37.                 var blnchecked = false;
  38.                 for (var j = 0; j < obj.length; j++){
  39.                     if (obj[j].checked){
  40.                         blnchecked = true;
  41.                     }
  42.                 }
  43.                 if (!blnchecked){
  44.                     alertMsg += " - " + fieldDescription[i] + "\n";
  45.                 }
  46.             }
  47.         }
  48.     }
  49.  
  50.     if (alertMsg.length == l_Msg){
  51.         return true;
  52.     }else{
  53.         alert(alertMsg);
  54.         return false;
  55.     }
  56.  
  57. }
  58.  
  59. // -->
  60. </script>
Now the JS which collapses the form....
Expand|Select|Wrap|Line Numbers
  1. <script> 
  2.             function toggle_form() { 
  3.                 var form   = document.getElementById('e_form'); 
  4.                 var thanks = document.getElementById('THANKS'); 
  5.                 form.style.display ='none'; 
  6.                 thanks.style.display='block'; 
  7.             } 
  8. </script>
Now the relevant snipet of the the form...

[HTML]<body>

<div id="THANKS" style="display:none;">
&nbsp;<table border="0" width="72%" id="table25">
<tr>
<td align="center" width="887">
<img border="0" src="_borders/conwyLogo.gif" width="97" height="64" align="right"></td>
</tr>
<tr>
<td align="center" width="887">Thank you for submitting an
e-Enrolment Form.</td>
</tr>
<tr>
<td align="center" width="887">You may now
<a href="#" onClick="window.close();">Close</a> this window.</td>
</tr>
</table>
</div>

<form method="post" action="mailto:my.email@work.uk.uk?subject=EnrolRe q" enctype="text/plain" subject="New User" name="FrontPage_Form1" onsubmit="return formCheck(this);" id="e_form" language="JavaScript" style="display:block;"> </div>

<input type="text" name="Manager_Name" size="36" tabindex="1">
<input type="text" name="Manager_Email" size="36" tabindex="3"><font color="#FF0000">*</font></td>
</tr>
<tr>

<input type="hidden" name="EOR" value="">
<input type="Submit" value="Submit!" onclick="toggle_form();"/>
<input type="reset" value="Clear Form">
</p>
</div>
</form>[/HTML]

Phew, so you can see (I think) when the user presses the SUBMIT button it makes the form vanish from view (it is a bit biggger than what I've included).

But I need the field validation bit to run through before it does that onclick="toggle_form();"/>

Any ideas.... I dont really want to change the way the form operates, I happy with that but just need it not to toggle if mandatory fields are not complete.

Thanks in advance...
Aug 23 '07 #1
4 1780
epots9
1,351 Expert 1GB
Let me explain....

I have a form (most of which you guys have helped me with!!). The initial problem I was having is that it was holding the data in the fields after submit, I resolved this by putting the whole form in a set of <div> tags and the form now collapses after they click submit. Perfect!!

But, have set some mandatory fields using java, and I need to it validate the these fields before it collapses the form - otherwise it says you haven't completed the form but the form collapses and the user cannot amend.

Here's the code..

First the JS for the mandatory fields...

Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript">
  2. <!--
  3.  
  4. function formCheck(formobj){
  5.     // Enter name of mandatory fields
  6.     var fieldRequired = Array("Manager_Name", "Manager_Email");
  7.     // Enter field description to appear in the dialog box
  8.     var fieldDescription = Array("First Name", "Last Name");
  9.     // dialog message
  10.     var alertMsg = "Please complete the following fields:\n";
  11.  
  12.     var l_Msg = alertMsg.length;
  13.  
  14.     for (var i = 0; i < fieldRequired.length; i++){
  15.         var obj = formobj.elements[fieldRequired[i]];
  16.         if (obj){
  17.             switch(obj.type){
  18.             case "select-one":
  19.                 if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
  20.                     alertMsg += " - " + fieldDescription[i] + "\n";
  21.                 }
  22.                 break;
  23.             case "select-multiple":
  24.                 if (obj.selectedIndex == -1){
  25.                     alertMsg += " - " + fieldDescription[i] + "\n";
  26.                 }
  27.                 break;
  28.             case "text":
  29.             case "textarea":
  30.                 if (obj.value == "" || obj.value == null){
  31.                     alertMsg += " - " + fieldDescription[i] + "\n";
  32.                 }
  33.                 break;
  34.             default:
  35.             }
  36.             if (obj.type == undefined){
  37.                 var blnchecked = false;
  38.                 for (var j = 0; j < obj.length; j++){
  39.                     if (obj[j].checked){
  40.                         blnchecked = true;
  41.                     }
  42.                 }
  43.                 if (!blnchecked){
  44.                     alertMsg += " - " + fieldDescription[i] + "\n";
  45.                 }
  46.             }
  47.         }
  48.     }
  49.  
  50.     if (alertMsg.length == l_Msg){
  51.         return true;
  52.     }else{
  53.         alert(alertMsg);
  54.         return false;
  55.     }
  56.  
  57. }
  58.  
  59. // -->
  60. </script>
Now the JS which collapses the form....
<snip>

Phew, so you can see (I think) when the user presses the SUBMIT button it makes the form vanish from view (it is a bit biggger than what I've included).

But I need the field validation bit to run through before it does that onclick="toggle_form();"/>

Any ideas.... I dont really want to change the way the form operates, I happy with that but just need it not to toggle if mandatory fields are not complete.

Thanks in advance...
instead of having the button call the toggle function, have the check call it when everything is ok.

Expand|Select|Wrap|Line Numbers
  1. if (alertMsg.length == l_Msg){
  2.         return true;
  3. toggle();
  4.     }else{
  5.         alert(alertMsg);
  6.         return false;
  7.     }
  8.  
[html]
<input type="Submit" value="Submit!" />
[/html]

good luck.
Aug 23 '07 #2
plumba
57
instead of having the button call the toggle function, have the check call it when everything is ok.

Expand|Select|Wrap|Line Numbers
  1. if (alertMsg.length == l_Msg){
  2.         return true;
  3. toggle();
  4.     }else{
  5.         alert(alertMsg);
  6.         return false;
  7.     }
  8.  
[html]
<input type="Submit" value="Submit!" />
[/html]

good luck.

Many thanks, epots, it works. Cheers!!!
Aug 23 '07 #3
epots9
1,351 Expert 1GB
glad to help, come back anytime.
Aug 23 '07 #4
plumba
57
glad to help, come back anytime.
Funny you should say that :)

The form works a treat when I preview in Frontpage, but as soon as preview through browser (IE6), the thing falls over, it doesn't run the mandartoy field check at all and subequently doesn't collapse the form!! Yet it functions perfectly when previewed in Frontpage.....

The Internet Option 'Use Java' is enable in and it runs other javascripts within the form work fine!

Here's a cut down version again, nothing stands out to me though...

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <script>
  4. function clientSideInclude(id, url) {
  5.   var req = false;
  6.   // For Safari, Firefox, and other non-MS browsers
  7.   if (window.XMLHttpRequest) {
  8.     try {
  9.       req = new XMLHttpRequest();
  10.     } catch (e) {
  11.       req = false;
  12.     }
  13.   } else if (window.ActiveXObject) {
  14.     // For Internet Explorer on Windows
  15.     try {
  16.       req = new ActiveXObject("Msxml2.XMLHTTP");
  17.     } catch (e) {
  18.       try {
  19.         req = new ActiveXObject("Microsoft.XMLHTTP");
  20.       } catch (e) {
  21.         req = false;
  22.       }
  23.     }
  24.   }
  25.  var element = document.getElementById(id);
  26.  if (!element) {
  27.   alert("Bad id " + id + 
  28.    "passed to clientSideInclude." +
  29.    "You need a div or span element " +
  30.    "with this id in your page.");
  31.   return;
  32.  }
  33.   if (req) {
  34.     // Synchronous request, wait till we have it all
  35.     req.open('GET', url, false);
  36.     req.send(null);
  37.     element.innerHTML = req.responseText;
  38.   } else {
  39.     element.innerHTML =
  40.    "Sorry, your browser does not support " +
  41.       "XMLHTTPRequest objects. This page requires " +
  42.       "Internet Explorer 5 or better for Windows, " +
  43.       "or Firefox for any system, or Safari. Other " +
  44.       "compatible browsers may also exist.";
  45.   }
  46. }
  47. </script>
  48.  
  49. <script type="text/javascript">
  50. <!--
  51. function validateDate(fld) {
  52.     var RegExPattern = /^((((0?[1-9]|[12]\d|3[01])[\.\-\/](0?[13578]|1[02])[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|[12]\d|30)[\.\-\/](0?[13456789]|1[012])[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|1\d|2[0-8])[\.\-\/]0?2[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|(29[\.\-\/]0?2[\.\-\/]((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00)))|(((0[1-9]|[12]\d|3[01])(0[13578]|1[02])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|[12]\d|30)(0[13456789]|1[012])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|1\d|2[0-8])02((1[6-9]|[2-9]\d)?\d{2}))|(2902((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00))))$/;
  53.     var errorMessage = 'Please enter valid date as DD/MM/YYYY';
  54.     if ((fld.value.match(RegExPattern)) && (fld.value!='')) {; 
  55.     } else {
  56.         alert(errorMessage);
  57.         fld.focus();
  58.     } 
  59. }
  60. //-->
  61. </script>
  62.  
  63. <script type="text/javascript">
  64. <!--
  65.  
  66. function changeDiv(the_div,the_change)
  67. {
  68.   var the_style = getStyleObject(the_div);
  69.   if (the_style != false)
  70.   {
  71.     the_style.display = the_change;
  72.   }
  73. }
  74.  
  75. function hideentype()
  76. {
  77.   changeDiv("enrolment_type","none");
  78.  
  79. }
  80.  
  81. function hidedips()
  82. {
  83.   changeDiv("dips_questions","none");
  84.  
  85. }
  86.  
  87. function hideas400()
  88. {
  89.   changeDiv("as400_questions","none");
  90.  
  91. }
  92.  
  93. function hidenotes()
  94. {
  95.   changeDiv("Lotus_Notes","none");
  96.  
  97. }
  98.  
  99. function hideems()
  100. {
  101.   changeDiv("EMS_Group","none");
  102.  
  103. }
  104.  
  105. function getStyleObject(objectId) {
  106.   if (document.getElementById && document.getElementById(objectId)) {
  107.     return document.getElementById(objectId).style;
  108.   } else if (document.all && document.all(objectId)) {
  109.     return document.all(objectId).style;
  110.   } else {
  111.     return false;
  112.   }
  113. }
  114. // -->
  115. </script>
  116.  
  117. <head>
  118.  
  119. <SCRIPT LANGUAGE="JavaScript">
  120. <!-- Limit the size of Additional Notes Box -->
  121. <!-- Begin
  122. function textCounter(field, countfield, maxlimit) {
  123. if (field.value.length > maxlimit) // if too long...trim it!
  124. field.value = field.value.substring(0, maxlimit);
  125. // otherwise, update 'characters left' counter
  126. else 
  127. countfield.value = maxlimit - field.value.length;
  128. }
  129. // End -->
  130. </script>
  131.  
  132.  
  133. <script> 
  134.             function toggle_display() { 
  135.                 var form   = document.getElementById('hidesubmit'); 
  136.                 var submit = document.getElementById('submit_group'); 
  137.                 ((form.checked)? submit.style.display='block': submit.style.display='none');
  138.                 }
  139. </script>
  140.  
  141.  
  142. <script> 
  143.             function toggle_form() { 
  144.                 var form   = document.getElementById('e_form'); 
  145.                 var thanks = document.getElementById('THANKS'); 
  146.                 form.style.display ='none'; 
  147.                 thanks.style.display='block'; 
  148.             } 
  149. </script>
  150.  
  151.  
  152. <script>
  153. <!--
  154.  
  155. function formCheck(formobj){
  156.     // Enter name of mandatory fields
  157.     var fieldRequired = Array("Manager_Name", "Manager_Email", "Date_Required", "Surname", "Forename", "Tel_No", "Job_Title", "Job_TitleW", "Section", "SectionW");
  158.     // Enter field description to appear in the dialog box
  159.     var fieldDescription = Array("Managers Name", "Managers Email", "Date Required", "Surname", "Forename", "Telephone Number", "Job Title", "Welsh Job Title", "Section", "Welsh Section");
  160.     // dialog message
  161.     var alertMsg = "Please complete the following fields:\n";
  162.  
  163.     var l_Msg = alertMsg.length;
  164.  
  165.     for (var i = 0; i < fieldRequired.length; i++){
  166.         var obj = formobj.elements[fieldRequired[i]];
  167.         if (obj){
  168.             switch(obj.type){
  169.             case "select-one":
  170.                 if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
  171.                     alertMsg += " - " + fieldDescription[i] + "\n";
  172.                 }
  173.                 break;
  174.             case "select-multiple":
  175.                 if (obj.selectedIndex == -1){
  176.                     alertMsg += " - " + fieldDescription[i] + "\n";
  177.                 }
  178.                 break;
  179.             case "text":
  180.             case "textarea":
  181.                 if (obj.value == "" || obj.value == null){
  182.                     alertMsg += " - " + fieldDescription[i] + "\n";
  183.                 }
  184.                 break;
  185.             default:
  186.             }
  187.             if (obj.type == undefined){
  188.                 var blnchecked = false;
  189.                 for (var j = 0; j < obj.length; j++){
  190.                     if (obj[j].checked){
  191.                         blnchecked = true;
  192.                     }
  193.                 }
  194.                 if (!blnchecked){
  195.                     alertMsg += " - " + fieldDescription[i] + "\n";
  196.                 }
  197.             }
  198.         }
  199.     }
  200.  
  201.     if (alertMsg.length == l_Msg){
  202.         toggle_form();
  203.     }else{
  204.         alert(alertMsg);
  205.         return false;
  206.     }
  207.  
  208. }
  209.  
  210. // -->
  211. </script>
  212.  
[html]

</head>


<body>

<div id="THANKS" style="display:none;">
&nbsp;<table border="0" width="72%" id="table25">
<tr>
<td align="center" width="887">
<img border="0" src="_borders/conwyLogo.gif" width="97" height="64" align="right"></td>
</tr>
<tr>
<td align="center" width="887">Thank you for submitting an
e-Enrolment Form.</td>
</tr>
<tr>
<td align="center" width="887">You may now
<a href="#" onClick="window.close();">Close</a> this window.</td>
</tr>
</table>
</div>

<form method="post" action="mailto:my@mail.work?subject=EnrolReq" enctype="text/plain" subject="New User" name="FrontPage_Form1" onsubmit="return formCheck(this);" id="e_form" language="JavaScript" style="display:block;"> </div>
&nbsp;<table border="0" width="72%" id="table4" height="82">
<tr>
<td align="right" width="37%">
<font size="2">Name:</font></td><td align="left" width="62%">&nbsp;<input type="text" name="Manager_Name" size="36" tabindex="1"><fontcolor="#FF0000">*</font></td>
</tr>
<tr>
<td align="right" width="37%">
<font size="2">Job Title:</font></td>
<td align="left" width="62%">
&nbsp;<input type="text" name="Manager_Job_Title" size="36" tabindex="2"></td>
</tr>
<tr>
<td align="right" width="37%">
<font size="2">Email Address:</font></td>
<td align="left" width="62%">
&nbsp;<input type="text" name="Manager_Email" size="36" tabindex="3"><font color="#FF0000">*</font></td>
</tr>
<input type="checkbox" name="agreecheck" id="hidesubmit" value="Agreed" onClick="toggle_display();"/>
By placing a check in the box you are agreeing to the above Access Authorisation Statement.</font></b></p>
<div id="submit_group" style="display:none;">
<table border="0" width="70%" id="table22" bgcolor="#CCFFFF">
<tr>
<td>
<p align="center"><font size="2">You may now click the SUBMIT button to
submit your e-Enrolment.</font><p align="center"><font size="2">When you click SUBMIT a screen will pop up indicating a program is sending an Email on your behalf.<br>
<b>You must click YES to submit the form.</b></font></td>
</tr>
</table>
<p>

<input type="hidden" name="EOR" value="">
<input type="Submit" value="Submit!">
<input type="reset" value="Clear Form">
</p>
</div>
</form>

<p>&nbsp;</p>
<p>&nbsp;</p>

</body>

</html>[/HTML]

Is it anything to do with the script being outside the <head> tag?? I'm clutching at straws here....
Aug 23 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Paul Thompson | last post: by
8 posts views Thread by Daniel Hansen | last post: by
3 posts views Thread by Josef K. | last post: by
28 posts views Thread by Kent Feiler | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.