CODEWITHSUNDEEP
javascriptjqueryhtmlreset
yigames
yigames

Reputation: 185

Reset button does not clear fields in HTML5

I have a page which reads from a file and displays filtered results depending on what is entered in the search boxes. When I click the reset button it clears the search boxes which is what I want, but I also want the filtered results to be cleared too. If I uncomment the call below, which is commented at the moment - it works but the search boxes do not clear.

HTML: 

<form>
    <ul data-bind="foreach:properties">
        <li><input data-bind="attr:{placeholder:id},event:{change:$root.onInputChange}, value:value, valueUpdate: 'afterkeydown'" /></li>
    </ul>   
    <input type="reset" value="Reset"/>
    <!--<input type="reset" value="Reset" data-bind="click:$root.onclick"/>-->
</form>
<p></p>
<table data-bind="foreach:itemsFiltered">
    <tr data-bind="foreach:$parent.formatItem($data)">
        <td data-bind="text:value"></td>
    </tr>
</table>

I need the search boxes and filtered results to clear.

Upvotes: 1

Views: 2596

Answers (1)

Quentin
Quentin

Reputation: 943571

Resetting a form resets the fields in it back to their default values (as specified by the value attribute). It doesn't clear the fields unless the default values are blank.

Your JavaScript is setting value attributes.

If you want to blank the fields, you'll need to set their value property to an empty string instead of simply resetting the form.

Upvotes: 8

Related Questions