-1

I have a form with drop down lists and I want to clear after I submit it and it shows the table. I searched for clearing a form and I found to use javascript. I read this article how to clear a form. I wrote the following javascript code, but it doesn't work.

   myjavascript.js
     <script type="text/javascript">
     <!--clear function-->
     function resetForm(form){
     // clearing selects
          var selects = form.getElementsByTagName('select');
           for (var i = 0; i<selects.length; i++)
         selects[i].selectedIndex = 0;

     return false;
     }
    </script>

This is my form:

    principal.php
     <?php

     if ($_SERVER['REQUEST_METHOD'] == 'POST'){
     switch ($_POST['program']){

     case 'BSc Computer Science':
          include 'csreadprog.php';
          break;
     case 'BSc Psychology':
          include 'psyreadprog.php';
          break;
     case 'BA Business Administration':
           include 'baedreadprog.php';
           break;
    }

     switch ($_POST['services']){

      case 'Library':
            include 'libraryread.php';
            break;

      case 'IT Services and Facilities':
          include'itserviceread.php';
          break;

      case 'Front Desk':
          include'frontdeskread.php';
          break;

      case 'Course Administrator':
          include'courseadminread.php';
          break;

      case 'International Student Office':
           include'stofficeread.php';
           break;

      case 'Clubs and Societies':
           include'clubsread.php';
           break;
     }

      switch($_POST['program'] && $_POST['criteria']){

      case 'BSc Computer Science' && 'I have found the unit interesting':
              include 'readcsprogcrit.php';
              break;

      case 'BSc Psychology' && 'I have gained knowledge':
              include 'readpsyprogcrit.php';
              break;

      case 'BA Business Administration' && 'I have acquired skills':
             include 'readbaedprogcrit.php';
             break;

      }
      switch($_POST['year']){

      case 'BSc Computer Science' && '2005':

          include 'readcsprogyear.php';
          break;

       case 'BSc Psychology' && '2005':
          include 'readpsyprogyear.php';
          break;

       case 'BA Business Administration' && '2005':
           include 'readbaedprogyear.php';
           break;

       }

    exit;
  }   
?>

  <html>
  <head>
     <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="myjavascript.js"></script>

   </head>
  <body>

  <div class="nav">
       <ul>

        <li><a href="principal.php">Principal</a></li>
        <li><a href="acad_director.php">Academic Director</a></li>
        <li><a href="lecturer.php">Lecturer</a></li>

       </ul>
   </div>

<form method="POST" action="principal.php" name="myform">
<b>Programs:<b/>
<select name="program"> 
<option value="Choose">Please select..</option>
<option value="Computer Science"> BSc Computer Science</option> 
<option value="BAED">BA Business Administration</option>
<option value="Psychology">BSc Psychology</option></select><br/><br/>

<b>Departments:<b/>
<select name="department"> 
<option value="Choose">Please select..</option>
<option value="Computer Science">Computer Science</option> 
<option value="BAED">BAED</option>
<option value="Psychology">Psychology</option></select><br/><br/>

<b>Year:<b/>
<select name="year"> 
<option value="Choose">Please select..</option>
<option value="2005">2005</option> 
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option></select><br/><br/>

<b>Criteria:<b/>
<select name="criteria"> 
<option value="Choose">Please select..</option>
<option value="I have found the unit interesting">I have found the unit interesting</option> 
<option value="I have gained knowledge">I have gained knowledge</option>
<option value="I have acquired skills">I have acquired skills</option>
<option value="Useful other resources">Useful other resources</option></select><br/><br/>

<b>Services:<b/>
<select name="services"> 
<option value="Choose">Please select..</option>
<option value="Library">Library</option> 
<option value="Course Administrator">Course Administrator</option>
<option value="International Student Office">International Student Office</option>
<option value="IT Services and Facilities">IT Services and Facilities</option>
<option value="Front Desk">Front Desk</option>
<option value="Clubs and Societies">Clubs and Societies</option></select><br/><br/>

<br/>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Clear">

</form>

Community
  • 1
  • 1
aurora
  • 161
  • 4
  • 15

3 Answers3

1

It's a good idea to use jquery instead of just raw javascript - it makes things easier, it's less code, and so it's more maintainable.

Anyway if you can use jQuery library - something like that should work:

$("#your_form").on('submit', function() {
    $(this).find('input, textarea').val("");
    $(this).find('select').prop('selectedIndex',0);
});

It should clear your form. Also input values - if you don't want that, you can remove line $(this).find('input, textarea').val(""); and it will clear only selectes.

plunntic iam
  • 964
  • 1
  • 9
  • 18
1

  1. Remove tags from myjavascript.js.

  2. Remove form argument from resetForm; it's not necessary.

  3. Add window.load call to resetForm() in myjavascript.js

myjavascript.js should now look like:

function resetForm(){
 // clearing selects
      var selects = document.getElementsByTagName('select');
       for (var i = 0; i<selects.length; i++) {
           selects[i].selectedIndex = 0;
       }
 }
 window.load(resetForm());
0

"myjavascript.js" must not contain <script type="text/javascript">, <!--clear function--> and </script>.
No HTML tag in Javascript files.

To add comments in javascript, use this : 

// my single line comment
/* my
   multi line
   comment */
SilvR-O
  • 68
  • 5