Clear Form

Clear input elements on a form using JavaScript.

by BuddhiP

HTML

<form>
    <div class="inputForm">
        <input type="text" value="myteset" />
        <br>
        <select id="onlySelect">
            <option>First</option>
            <option>Second</option>
            <option>Third</option>
            <option>Fourth</option>
        </select>
        <br>
        <select id="onlySelect2" multiple="multiple">
            <option value="">[Select Something]</option>
            <option value="first">First</option>
            <option value="second">Second</option>
            <option value="third">Third</option>
            <option value="fourth">Fourth</option>
        </select>
        <br />
        <input type="radio" value="First" name="Radio">First</input>
        <input type="radio" value="Second" name="Radio">Second</input>
        <input type="radio" value="Third" name="Radio">Third</input>
        <input type="radio" value="Fourth" name="Radio">Fourth</input>
        <br/>
        <input type="submit" value="Submit"></input>
        <input type="button" value="Clear Form" class="clearForm"></input>
        </inputForm>
</form>

JavaScript

$(document).ready(function () {
    $('input.clearForm').click(function (event) {
        $cont = $(this).closest('.inputForm');
        console.log($cont);
        // Clearing the form controls
        var x = $cont.find('input, select, radio')
            .not(':hidden, :submit, :reset')
            .filter('select')
            .each(function (i, s) {
            $(s).find('option:selected').removeAttr('selected');
        })
            .end()
            .filter(':text')
            .val('')
            .filter(':radio').removeAttr('checked').refresh();
        console.log(x);
    });
});