2015-03-12 1 views
-1

J'ai un formulaire avec des listes déroulantes et je veux effacer après que je l'ai soumis et il montre la table. J'ai cherché à effacer un formulaire et j'ai trouvé d'utiliser javascript. J'ai lu cet article how to clear a form. J'ai écrit le code javascript suivant, mais cela ne fonctionne pas.Impossible d'effacer un formulaire après la soumission

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> 

C'est ma forme:

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> 

+0

Pouvez-vous utiliser la bibliothèque jQuery au lieu de simplement javascript cru? – plunntic

Répondre

0

"myjavascript.js" ne doivent pas contenir <script type="text/javascript">, <!--clear function--> et </script>.
Pas de balise HTML dans les fichiers Javascript.

Pour ajouter des commentaires en javascript, utilisez ceci:

// my single line comment 
/* my 
    multi line 
    comment */ 
1

Il est une bonne idée d'utiliser jquery au lieu de simplement javascript brut - il rend les choses plus facile, il est moins de code, et il est donc plus maintenable.

Quoi qu'il en soit si vous pouvez utiliser la bibliothèque jQuery - quelque chose comme ça devrait fonctionner:

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

Il devrait effacer votre formulaire. Entrez également des valeurs - si vous ne le souhaitez pas, vous pouvez supprimer la ligne $(this).find('input, textarea').val(""); et effacera uniquement les sélections.

1
  1. Enlever les balises de myjavascript.js.

  2. Supprimer l'argument de forme de resetForm; ce n'est pas nécessaire.

  3. appel Ajouter un window.load à resetForm() dans myjavascript.js

myjavascript.js devrait ressembler à:

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