By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,947 Members | 1,505 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,947 IT Pros & Developers. It's quick & easy.

Removing of error msg using reset button

P: 21
I have a form where I use some field validations which shows messages if getting errors or corrects.At bottom there is a reset button to reset all previously input data and javascript messages also.My reset button cant be able to remove javascript messages from page.Can anyone guide me?
Expand|Select|Wrap|Line Numbers
  1. <?php /*?><?php 
  2. session_start();
  3. include "config.php"; 
  4.  
  5. ?><?php */?>
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  7. <html xmlns="http://www.w3.org/1999/xhtml">
  8. <head>
  9. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  10. <title>Kesoram Industries Limited | Corporate Relations Website</title>
  11.  
  12. <script language="javascript" type="text/javascript">
  13.  
  14.  
  15.  
  16.       function checkEmail()
  17.     {
  18.         var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
  19.         var email = document.getElementById("email");
  20.         if(!email.value.match(emailExp))
  21.         {
  22.             document.getElementById("e").innerHTML = "<img src='wrong.png'/>";
  23.             email.focus();
  24.         }
  25.         else
  26.         {
  27.             document.getElementById("e").innerHTML = "<img src='right.png'/>";
  28.         }
  29.     }
  30.  
  31.      function checkName()
  32.     {
  33.         var nameExp = /^[a-zA-Z]+$/;
  34.         var name = document.getElementById("name");
  35.         if(!name.value.match(nameExp))
  36.         {
  37.             document.getElementById("n").innerHTML = "<img src='wrong.png'/>";
  38.             name.focus();
  39.         }
  40.         else
  41.         {
  42.             document.getElementById("n").innerHTML = "<img src='right.png'/>";
  43.         }
  44.     }
  45.  
  46.  
  47. </script>
  48. <script language="javascript" src="check.js"></script>
  49.  
  50.  
  51.  
  52.  
  53.   <table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
  54.     <tr>
  55.  
  56.       <form name="form1" id="form1" action="" method="post" onsubmit="return check();">
  57.         <table width="600" border="0" align="center" cellspacing="0">
  58.           <tr>
  59.             <td nowrap="nowrap" bgcolor="#CA6A13" class="mail-tablehead-rev">&nbsp;Company :</td>
  60.             <td>&nbsp;</td>
  61.             <td nowrap="nowrap">&nbsp;</td>
  62.           </tr>
  63.           <tr>
  64.             <td nowrap="nowrap" class="mail-l-new">&nbsp;</td>
  65.             <td>&nbsp;</td>
  66.             <td>&nbsp;</td>
  67.           </tr>
  68.           <tr>
  69.             <td nowrap="nowrap" class="mail-l-new">Department&nbsp;</td>
  70.             <td>&nbsp;</td>
  71.             <td> <label for="dept"></label>            
  72.              <select name="country" class="mail-boxtext" id="Department" onChange="getCity(this.value)">
  73.               <option value=""selected>Select Department</option>
  74.               <option value="1">India</option>
  75.               <option value="2">USA</option>
  76.               <option value="3">Pakistan</option>
  77.               <option value="4">Australia</option>
  78.               </select></td>
  79.               <tr>
  80.             <td class="mail-l-new">Subject&nbsp;</td>
  81.             <td>&nbsp;</td>
  82.             <td ><div id="citydiv"><select name="city" class="mail-boxtext"  id="Subject" >
  83.               <option>Select Department First</option>
  84.             </select></div></td>
  85.               </tr>
  86.             <tr>
  87.             <td nowrap="nowrap" class="mail-l-new">Folio No./DP ID</td>
  88.             <td>&nbsp;</td>
  89.             <td><input type="text" name="foliono" id="foliono" onmouseover="showhint('Please enter a Folio No. Should be in proper format.', this, event, '150px')" onblur="check_input()" size="40" maxlength="100" length="100" class="mail-boxtext"/></td>
  90.             <td id="id">&nbsp;</td>
  91.             </tr>
  92.             <tr>
  93.             <td class="mail-l-new">Client ID</td>
  94.             <td>&nbsp;</td>
  95.             <td><input type="text" name="clientid" id="clientid" onmouseover="showhint('Please enter a Client Id.', this, event, '150px')" onFocus="checkNumber()" onblur="check_input()" size="40" maxlength="100" length="100" class="mail-boxtext"/></td>
  96.             <td id="id1">&nbsp;</td>
  97.             </tr>
  98.             <!--<tr>
  99.             <td class="mail-l-new">&nbsp;</td>
  100.             <td class="mail-tablehead-revCopy">&nbsp;</td>
  101.             <td class="mail-tablehead-revCopy"><font><span class="mail-text-small">For queries related to <strong>Share Department</strong>, Folio No. / DP ID and Client ID is mandatory. Incase of other queries it should be given as Not Applicable.</span></font></td>
  102.             </tr>-->
  103.           <tr>
  104.             <td bgcolor="#CA6A13" class="mail-tablehead-rev">&nbsp;Details :</td>
  105.             <td class="mail-tablehead-revCopy">&nbsp;</td>
  106.             <td class="mail-tablehead-revCopy">&nbsp;</td>
  107.           </tr>
  108.           <tr>
  109.             <td valign="top" class="mail-l-new">Name&nbsp;</td>
  110.             <td>&nbsp;</td>
  111.             <td><input name="name" type="text" class="mail-boxtext" id="name" onblur="check_input()" onfocus="checkClientid()" size="50" maxlength="100" length="100" onmouseover="showhint('Please enter a Name. Should be in proper format.', this, event, '150px')"/></td>
  112.             <td id="n">&nbsp;</td>
  113.           </tr>
  114.           <tr>
  115.             <td valign="top" class="mail-l-new">Address&nbsp;</td>
  116.             <td valign="top">&nbsp;</td>
  117.             <td valign="top" class="mail-text"><textarea name="address" cols="50" rows="5" class="mail-boxtext" id="address" onFocus="checkName()" onblur="check_input()" onmouseover="showhint('Please enter an Address.', this, event, '150px')"></textarea></td>
  118.             <td id="id2">&nbsp;</td>
  119.           </tr>
  120.           <tr>
  121.             <td valign="top" class="mail-l-new">Email&nbsp;</td>
  122.             <td valign="top">&nbsp;</td>
  123.             <td><input name="email" type="text" class="mail-boxtext" id="email" onblur="check_input()" onfocus="checkAddress()" size="40" maxlength="100" onmouseover="showhint('Please enter an Email Id. Should be in proper format.', this, event, '150px')"/></td>
  124.             <td id="e">&nbsp;</td>
  125.             </tr>
  126.           <tr>
  127.             <td valign="top" class="mail-l-new">Contact No.&nbsp;</td>
  128.             <td valign="top">&nbsp;</td>
  129.             <td><input name="phone" type="text" class="mail-boxtext" id="phone" onFocus="checkEmail()" onblur="check_input()" size="40" maxlength="100" onmouseover="showhint('Please enter a 10 digit Phone No.', this, event, '150px')"/></td>
  130.             <td id="id3">&nbsp;</td>
  131.           </tr>
  132.           <tr>
  133.             <td valign="top" bgcolor="#CA6A13" class="mail-tablehead-rev">&nbsp;Query:</td>
  134.             <td rowspan="2" valign="top">&nbsp;</td>
  135.             <td>&nbsp;             </td>
  136.           </tr>
  137.           <tr>
  138.             <td valign="top" class="mail-l-new">&nbsp;</td>
  139.             <td><!--<script language = "Javascript">
  140.  
  141.  
  142. maxL=1000;
  143. var bName = navigator.appName;
  144. function taLimit(taObj) {
  145.     if (taObj.value.length==maxL) return false;
  146.     return true;
  147. }
  148.  
  149. function taCount(taObj,Cnt) { 
  150.     objCnt=createObject(Cnt);
  151.     objVal=taObj.value;
  152.     if (objVal.length>maxL) objVal=objVal.substring(0,maxL);
  153.     if (objCnt) {
  154.         if(bName == "Explorer"){    
  155.             objCnt.textContent=maxL-objVal.length;}
  156.         else{objCnt.innerText=maxL-objVal.length;}
  157.     }
  158.     return true;
  159. }
  160. function createObject(objId) {
  161.     if (document.getElementById) return document.getElementById(objId);
  162.     else if (document.layers) return eval("document." + objId);
  163.     else if (document.all) return eval("document.all." + objId);
  164.     else return eval("document." + objId);
  165. }
  166. </script>--><font><!--<span class="mail-text-small">              Maximum characters for this text box is 1000.</span><br>-->
  167.   <textarea name="message" cols=50 rows=8 wrap="physical" class="mail-boxtext" id="message" onfocus="checkPhno()">
  168.   </textarea>
  169.   <br>
  170.   <!--<span class="mail-text-small">You have <B><SPAN id=myCounter>1000</SPAN></B> characters remaining 
  171.               for your message.</span>--></font></td>
  172.               <td id="id4">&nbsp;</td>
  173.           </tr>
  174.           <tr>
  175.             <td>&nbsp;</td>
  176.             <td class="code-text">&nbsp;</td>
  177.             <td>&nbsp;</td>
  178.             </tr>
  179.           <tr>
  180.             <td>&nbsp;</td>
  181.             <td class="code-text">&nbsp;</td>
  182.             <td><input type="submit" name="submit" id="submit" value="Preview"/> <input type="hidden" id="sub"  />             
  183.            <input type="reset" name="reset" id="reset" value="Reset" onclick="document.form1.reset();return false;"/>            </td>
  184.             </tr>
  185.         </table>
  186.       </form></td>
  187.     </tr>
  188.   </table>
  189. </div>
  190.  
  191. </body>
  192. </html>
  193.  
Mar 5 '13 #1
Share this Question
Share on Google+
5 Replies


Rabbit
Expert Mod 10K+
P: 12,430
Instead of calling the reset function directly in the event, have it call a function that calls the reset and also removes your javascript messages.
Mar 5 '13 #2

P: 21
Can you show me an example?Actually I just want to find the shortest way to do that.
Mar 5 '13 #3

Rabbit
Expert Mod 10K+
P: 12,430
You already have examples of that in the code you posted.
Mar 5 '13 #4

P: 21
How do I reset an html validation control via JavaScript? The current code sample clears the error message but does not reset the validation control for the next form submission.Here is my Code:
Expand|Select|Wrap|Line Numbers
  1. function resetFrm()
  2.    {
  3.    var myTextField = document.getElementById("n");
  4.    var myTextField1 = document.getElementById("e");
  5.    ;
  6.  
  7.     if(myTextField.value != "")
  8.     {
  9.     myTextField.style.display = "none"; 
  10.     }
  11.     else myTextField.style.display = "none"; 
  12.  
  13.     if(myTextField1.value != "")
  14.     {
  15.     myTextField1.style.display = "none"; 
  16.     }
  17.     else myTextField1.style.display = "none"; 
  18.  
  19.         }
Mar 6 '13 #5

Rabbit
Expert Mod 10K+
P: 12,430
Which line of code are you referring to in your first post that has the control you want to reset?
Mar 6 '13 #6

Post your reply

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