Question

我有一个带有下拉列表的表单，我想在提交后清除它并显示表格。我搜索了清除表单，我发现使用javascript。我读了这篇文章how to clear a form。我写了以下javascript代码，但它不起作用。

   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>

这是我的表格：

    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>

Answer 1

使用jquery而不仅仅是原始javascript是一个好主意 - 它使事情变得更容易，代码更少，因此更易于维护。

无论如何，如果你可以使用jQuery库 - 那样的东西应该有效：

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

它应该清除你的表格。同时输入值 - 如果你不想要，你可以删除行$(this).find('input, textarea').val("");，它只会清除选择。

Answer 2

从myjavascript.js中删除标签。
从resetForm中删除form参数;没必要。
在myjavascript.js中将window.load调用添加到resetForm（）

myjavascript.js现在应该如下：

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

Answer 3

＆＃34; myjavascript.js＆＃34;不得包含<script type="text/javascript">，和</script> Javascript文件中没有HTML标记。

要在javascript中添加评论，请使用：

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

提交后无法清除表格

3 个答案: