CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
Manik Shakya
Manik Shakya

Reputation: 165

Reset button not working in the form after form submit

I have a php page 'search.php'. One form in the page. I have one submit and one reset button. The reset button works before the form is submit but it doesn't work after the submit. The page is redirected to the same page (search.php) after form submission to view the results which contains the same form. Does anyone have a clue on this problem?

    <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>

Upvotes: 2

Views: 20197

Answers (1)

Patrick Q
Patrick Q

Reputation: 6393

The behavior of type='reset' is not to clear the form elements, but to return them to the initial/default values when the page was loaded. After you submit your form, if you are then passing the submitted values back to the form to be pre-populated (set as the initial values) of the form, then your reset button will only reset the fields to those passed values, not to a "clean" state. To actually clear the form, you will need to use Javascript.

Here is an example that would work for the HTML given in your question...

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

Just change your reset button to this...

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

Live Example

Upvotes: 19

Related Questions