validate form onChange?

  • vickriz
  • Novice
  • Novice
  • User avatar
  • Posts: 31
  • Loc: Phlippines

Post 3+ Months Ago

i found this script on the web -validating select form:
what if i want to use onChange attribute for select instead with the form onSubmit? how can we accomplish that?
also how can i display the name of select element [Province,Municipality,Barangay] onto error instead the plain 'Please select name from each list.'

Thank you. Any help will appreciate and thanks in advance..

Code: [ Select ]
<script>
function checkform(oForm) {
   var el, i = 0;
   while (el = oForm.elements['inames' + (i++)]) {
      if (el.options[el.selectedIndex].value == '1') {
        alert('Please select name from each list.\n\nThank you.\n');
        el.focus();
        return false;
   }
  }
   return true;
}
</script>
<body onload="document.myform.polID.focus();">
<form name="myform" method="POST" action="formvalidate.htm" onsubmit="return checkform(this)"><font size="2">Demo: Enter Key Event</font>
    <table bgcolor="#9ABEF4">
     <tr>
        <td><font size="2">PoliticalID</font></td>
        <td><input name="polID" type="text" size="13" indexNo="1" onKeyDown="EnterHandler(event)">&
         <a href="javascript:explain('Political ID', 'opener.document.myform.polID.value', 'The Political ID field is where you enter the unique number or ID for the purpose of indentification key access and to easily identify the politician person. .');" onMouseOver="window.status='Click for explanation...';return true;" onMouseOut="window.status='';return true;"><font size="2">Help?</font></a>
        </td>
     </tr>
     <tr>
        <td><font size="2">Surname</font></td>
        <td><input name="surname" type="text" size="50" indexNo="2" onKeyDown="EnterHandler(event)"></td>
     </tr>
     <tr>
        <td><font size="2">FirstName</font></td>
        <td><input name="firstname" type="text" size="35" indexNo="3" onKeyDown="EnterHandler(event)"></td>
     </tr>
     <tr>
        <td><font size="2">BirthDate</font></td>
        <td><input type="text" name="birthdate" size="16" indexNo="4" onKeyDown="EnterHandler(event)"><font size="2"><i>(mm/dd/yyyy)</i></font></td>
     </tr>
    <tr>
        <td colspan="2">
            <table cellspacing="3" cellpadding="0">
                <tr>
                    <td>
                        <select size="1" name="inames0" indexNo="5" onKeyDown="EnterHandler(event)">
                        <option value="1" selected>---------- Province Names ----------</option>
                        <option value="something">ABRA</option>
                        <option value="something">BOHOL</option>
                        <option value="something">COTOBATO</option>
                        </select>                    
                    </td>
                </tr>
                <tr>
                    <td>
                        <select size="1" name="inames1" indexNo="6" onKeyDown="EnterHandler(event)">
                        <option value="1" selected>---------- Municipality Names ----------</option>
                        <option value="something">Aurora</option>
                        <option value="something">Antipolo City</option>
                        <option value="something">Pasay City</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <select size="1" name="inames2" indexNo="7" onKeyDown="EnterHandler(event)">
                        <option value="1" selected>---------- Barangay Names ----------</option>
                        <option value="something">Barangay 1</option>
                        <option value="something">Barangay 10</option>
                        <option value="something">Sitio Upo</option>
                        </select>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <p><input type="submit" value="Send" name="submit"></p>
    </td>
    </tr>
    </table>
</form>
  1. <script>
  2. function checkform(oForm) {
  3.    var el, i = 0;
  4.    while (el = oForm.elements['inames' + (i++)]) {
  5.       if (el.options[el.selectedIndex].value == '1') {
  6.         alert('Please select name from each list.\n\nThank you.\n');
  7.         el.focus();
  8.         return false;
  9.    }
  10.   }
  11.    return true;
  12. }
  13. </script>
  14. <body onload="document.myform.polID.focus();">
  15. <form name="myform" method="POST" action="formvalidate.htm" onsubmit="return checkform(this)"><font size="2">Demo: Enter Key Event</font>
  16.     <table bgcolor="#9ABEF4">
  17.      <tr>
  18.         <td><font size="2">PoliticalID</font></td>
  19.         <td><input name="polID" type="text" size="13" indexNo="1" onKeyDown="EnterHandler(event)">&
  20.          <a href="javascript:explain('Political ID', 'opener.document.myform.polID.value', 'The Political ID field is where you enter the unique number or ID for the purpose of indentification key access and to easily identify the politician person. .');" onMouseOver="window.status='Click for explanation...';return true;" onMouseOut="window.status='';return true;"><font size="2">Help?</font></a>
  21.         </td>
  22.      </tr>
  23.      <tr>
  24.         <td><font size="2">Surname</font></td>
  25.         <td><input name="surname" type="text" size="50" indexNo="2" onKeyDown="EnterHandler(event)"></td>
  26.      </tr>
  27.      <tr>
  28.         <td><font size="2">FirstName</font></td>
  29.         <td><input name="firstname" type="text" size="35" indexNo="3" onKeyDown="EnterHandler(event)"></td>
  30.      </tr>
  31.      <tr>
  32.         <td><font size="2">BirthDate</font></td>
  33.         <td><input type="text" name="birthdate" size="16" indexNo="4" onKeyDown="EnterHandler(event)"><font size="2"><i>(mm/dd/yyyy)</i></font></td>
  34.      </tr>
  35.     <tr>
  36.         <td colspan="2">
  37.             <table cellspacing="3" cellpadding="0">
  38.                 <tr>
  39.                     <td>
  40.                         <select size="1" name="inames0" indexNo="5" onKeyDown="EnterHandler(event)">
  41.                         <option value="1" selected>---------- Province Names ----------</option>
  42.                         <option value="something">ABRA</option>
  43.                         <option value="something">BOHOL</option>
  44.                         <option value="something">COTOBATO</option>
  45.                         </select>                    
  46.                     </td>
  47.                 </tr>
  48.                 <tr>
  49.                     <td>
  50.                         <select size="1" name="inames1" indexNo="6" onKeyDown="EnterHandler(event)">
  51.                         <option value="1" selected>---------- Municipality Names ----------</option>
  52.                         <option value="something">Aurora</option>
  53.                         <option value="something">Antipolo City</option>
  54.                         <option value="something">Pasay City</option>
  55.                         </select>
  56.                     </td>
  57.                 </tr>
  58.                 <tr>
  59.                     <td>
  60.                         <select size="1" name="inames2" indexNo="7" onKeyDown="EnterHandler(event)">
  61.                         <option value="1" selected>---------- Barangay Names ----------</option>
  62.                         <option value="something">Barangay 1</option>
  63.                         <option value="something">Barangay 10</option>
  64.                         <option value="something">Sitio Upo</option>
  65.                         </select>
  66.                     </td>
  67.                 </tr>
  68.             </table>
  69.         </td>
  70.     </tr>
  71.     <tr>
  72.         <td colspan="2" align="center">
  73.             <p><input type="submit" value="Send" name="submit"></p>
  74.     </td>
  75.     </tr>
  76.     </table>
  77. </form>
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9099
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

vickriz wrote:
what if i want to use onChange attribute for select instead with the form onSubmit? how can we accomplish that?


It is pretty easy actually. All you need to do is place this into the select field that you want to initiate the submit after a change. Here is what you could use as an example:

Code: [ Select ]
<select name="someName" onChange="submit()">

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 56 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.