javascript - 在 php 中将表单提交给自身后，表单重置按钮不起作用

Question

这是我的js代码

<script type="text/javascript">
   function resetForm(formID)
   {
       var myForm = document.getElementById(formID);

       for (var i = 0; i < myForm.elements.length; i++)
       {
           if ('submit' != myForm.elements[i].type && 'reset' != myForm.elements[i].type)
           {
               myForm.elements[i].checked = false;
               myForm.elements[i].value = '';
               myForm.elements[i].selectedIndex = 0;
           }
       }
   }
</script>

这是我的 php 代码，

echo "<form class='navbar-form' id='formID' method='POST' action=''>"; 

$sqluser="SELECT DISTINCT username FROM user ORDER BY username ASC";
$resultuser=mysqli_query($conn,$sqluser);

if(isset($_POST['from_date']))
    echo "<div class='form-group' style='margin-right:5px;'><input  id='from_date' name='from_date' type='date' data-date-inline-picker='true' value='".$_POST['from_date']."'/></div>";
else
    echo "<div class='form-group' style='margin-right:5px;'><input  id='from_date' name='from_date' type='date' data-date-inline-picker='true' /></div>";

if(isset($_POST['from_date']))
    echo "<div class='form-group' style='margin-right:5px;'><input  id='to_date' name='to_date' type='date' data-date-inline-picker='true' value='".$_POST['to_date']."'/></div>";
else
    echo "<div class='form-group' style='margin-right:5px;'><input  id='to_date' name='to_date' type='date' data-date-inline-picker='true' /></div>";

echo "<div class='form-group' style='margin-right:5px;'><select  id='username' name='username' style='width:170px;height:33px;'>";
if(isset($_POST['username']) && $_POST['username'] == "-- Username --")
    echo "<option selected='selected'>-- Username --</option>";
else
    echo "<option >-- Username --</option>";
while($ro1=mysqli_fetch_array($resultuser))
{
    if(isset($_POST['username']) && $_POST['username'] == $ro1['username'])
        echo "<option selected='selected' value='".$ro1['username']."'>".$ro1['username']."</option>";
    else
        echo "<option value='".$ro1['username']."'>".$ro1['username']."</option>";
}
echo "</select>";
echo "</div>";
echo "<div class='form-group' style='margin-right:5px;'><input name='reset' type='reset' onclick='resetForm('formId'); return false;' /></div>";

echo "<div class='form-group' style='margin-right:5px;'><input type='submit' value='submit'></div>";
echo "</form>";

点击提交按钮后，表单将提交到同一页面，结果将显示在表单下方。即使在提交后，我也在表单中显示用户输入值。现在，我想要一个重置按钮来清除所有输入字段。提交表单后，但重置按钮在提交前有效，提交后不起作用。

Answer 1

在重置按钮的 onclick 函数中传递的表单 ID 不正确。

将 resetForm('formId'); 更改为 resetForm('formID');

或者，您可以消除对自定义函数的需求，并让 type=reset 完成其工作。

更改重置按钮

<input name='reset' type='reset' onclick='resetForm('formId'); return false;' />

至

<input name='reset' type='reset' value='Reset'/>

Input Type Reset Reference Link