Wednesday, October 5, 2016

How to reset a particular form field using jQuery

Full code snippet

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form style="margin: 50px;">
    <div>
        <input type='text' value='Default value' class="check_overall_change" style='width:206px'/>
        <button type='button'>Reset</button>
    </div>

    <div>
        <input type='checkbox' name='checkbox' value='1' class="check_overall_change"/> #1
        <input type='checkbox' name='checkbox' value='2' checked class="check_overall_change"/> #2
        <input type='checkbox' name='checkbox' value='3' class="check_overall_change"/> #3
        <button type='button' style='margin-left:78px'>Reset</button>
    </div>

    <div>
        <select style='width:206px' class="check_overall_change">
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='3' selected>3</option>
        </select>
        <button type='button'>Reset</button>
    </div>

    <div>
        <select multiple style='width:206px' class="check_overall_change">
            <option value='1'>1</option>
            <option value='2' selected>2</option>
            <option value='3'>3</option>
            <option value='4' selected>4</option>
        </select>
        <button type='button'>Reset</button>
    </div>
    <div class="log"></div>
</form>
</body>
<script type="text/javascript">
    var baseConfig = getOverallValue(), log = $(".log");

    $(".check_overall_change").on("change", function () {
        checkFormValueChanged();
    })

    $(".check_overall_change[type='text']").on("keyup", function () {
        checkFormValueChanged();
    })

    function checkFormValueChanged() {
        if(baseConfig != getOverallValue()) {
            log.html("<h3>Value changed</h3>");
        }
        else {
            log.html("<h3>Value not changed</h3>");
        }
    }

    function resetForm() {
        var thiz = $(this), input = thiz.closest("div").find(":input:not(button)");
        if(input.is("select")) {
            var values = [];
            var options = input.find("option");
            for(var index = 0; index < options.length; index++) {
                if(options[index].defaultSelected) {
                    values.push($(options[index]).val())
                }
            }
            input.val(values);
        }
        else if(input[0].type == 'checkbox') {
            for(var index = 0; index < input.length; index++) {
                if(input[index].defaultChecked) {
                    $(input[index]).prop("checked", "checked");
                }
                else {
                    $(input[index]).prop("checked", null);
                }
            }
        }
        else {
            input.val(input[0].defaultValue)
        }
        checkFormValueChanged();
    }

    function getOverallValue() {
        var values = "";
        $(".check_overall_change").each(function (index, element) {
            element = $(element);
            if(element[0].type == 'checkbox') {
                values += element.is(":checked") + "-";
            }
            else {
                values += element.val() + "-";
            }
        })
        return values;
    }

    $("button").bind("click", resetForm);
</script>

And finally jsFiddle link to test yourself

Click here to test yourself at jsFiddle

No comments:

Post a Comment