JavaScript:点击提交给自己后清除表单数据

Question

新来的学生正在努力构建我的类作业历史，这对我 future 的反射(reflection)很有帮助；目前我正在做一个表格作业，它有效，但我正在尝试插入它以充分利用体验。我的目标是，如果我点击“重置”按钮，无论我是否点击了提交(“继续”)按钮，表单都会被清除。目前，如果我在单击提交按钮之前单击清除按钮，表单数据将被清除。但是如果我点击了继续(将表单提交给自己并且表单数据现在位于 url 中)，数据将不会清除。

这是我的javascript函数

<script>
/* JS to clear form */
function myFunction() { document.getElementById("myForm").reset(); }
</script>

这是代码的整个表单部分:

<form enctype="multipart/form-data" action="./itc216.php" method="get">
                    Name: &nbsp; &nbsp; &nbsp;<input ="text" name="userName" value="<?php echo $userName; ?>" />
                    <span class="error"><?php echo $errorMessage1; ?></span><br /><br />

                    Amount: &nbsp;<input ="text" name="mealTotal" value="<?php echo $mealTotal; ?>" />
                    <span class="error"><?php echo $errorMessage2; ?></span><br /><br />

                    <input type="checkbox" name="agreement" <?php echo $agreement; ?>  />
                    Do you agreement to the terms and conditions?
                    <span class="error"><?php echo $agreementError; ?></span><br /><br />


                    <input type="submit" name="submit" value="Continue" />  &nbsp;|&nbsp;  <input type="reset" onclick="myFunction()" value="Reset!">
                </form>

Answer 1

Reset 不会清除表单，而是将表单重置为其默认值。如果您使用提交的数据预先填充表单输入，那么表单将重置为这些内容。如果是这种情况，要清除表单，您需要让 Javascript 将所有值设置为空。