表单提交后,重置按钮在表单中不起作用

Question

我有一个php页面'search.php'.页面中的一个表单.我有一个提交和一个重置按钮.重置按钮在表单提交之前有效,但在提交后不起作用.在提交表单后,页面将重定向到同一页面(search.php),以查看包含相同表单的结果.有没有人对这个问题有所了解？

    <form action="http://localhost:8888/search/validate_search" name="search" id="search" method="post" accept-charset="utf-8">
    <p>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" value="" required="required">
    </p>
    <p>
        <label for="country">Country</label>

        <select name="country[]" id="country">
            <option value="">Select</option>
            <option value="Afghanistan" >Afghanistan</option><option 

value="Albania" >Albania</option><option value="Algeria" >Algeria</option><option value="American Samoa" >American Samoa</option><option value="Andorra" >Andorra</option><option value="Angola" >Angola</option><option value="Anguilla" >Anguilla</option>            </select>

    </p>
    <p id="nofloat">
        <input type="submit" name="searchButton" value="Search" id="searchButton"  />
        <input type="reset" name="reset" value="Reset" id="reset123"/>
    </p>
   </form>  

Answer 1

行为type='reset'不是清除表单元素,而是在加载页面时将它们返回到初始值/默认值.提交表单后,如果您要将提交的值传递回要预填充的表单(设置为表单的初始值),那么您的重置按钮只会将字段重置为那些传递的值,而不是一个"干净"的状态.要实际清除表单,您需要使用Javascript.

这是一个适用于您的问题中给出的HTML的示例...

<script>
function customReset()
{
    document.getElementById("name").value = "";
    document.getElementById("country").value = "";
}
</script>

只需将重置按钮更改为此...

<input type="button" name="reset" value="Reset" id="reset123" onclick="customReset();"/>

实例