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

时间:2016-12-05 18:30:49

标签: javascript php jquery html forms

我有一个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>  

1 个答案:

答案 0 :(得分:6)

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();"/>

Live Example