Undo and Clear an HTML Form

Differences between reset and clear

by db_dev

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
 <div class="alert alert-info" role="alert">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="formFlag">
                <label class="form-check-label" for="formFlag">Changes Made?</label>
            </div>
        </div>
    <div class="card">
        <div class="card-body">
            <form id="simpleForm">
                <div class="form-group">
                    <label for="Email1">Email address</label>
                    <input type="email" class="simpleForm form-control form-control-sm" value="[email protected]" id="Email1" aria-describedby="emailHelp" />
                    <small class="form-text text-muted">Some details on what this input is for.</small>
                </div>
                <div class="form-group">
                    <label for="Password1">Password</label>
                    <input type="password" class="simpleForm form-control form-control-sm" value="My Password" id="Password1">
                </div>
                <div class="form-group">
                    <label for="Select1">Single Select</label>
                    <select class="simpleForm form-control" id="Select1">
					  <option>1</option>
					  <option selected="selected">2</option>
					  <option>3</option>
					  <option>4</option>
					  <option>5</option>
					</select>
                </div>
                <div class="form-group">
                    <label...

JavaScript

var somethingChanged = false;

$("#btnUndo").on('click', function() {
    $('#simpleForm').get(0).reset();
    var somethingChanged = false;
    $("#btnSave").attr("disabled", true);
    $("#formFlag").attr("checked", false);
});

function clearForm(ele) {
    $(ele).find(':input').each(function() {
        switch (this.type) {
            case 'text':
            case 'password':
            case 'select-multiple':
            case 'select-one':
            case 'text':
            case 'textarea':
                $(this).val('');
                break;
            case 'checkbox':
            case 'radio':
                this.checked = false;
        }
    });
}
$("#btnClear").on('click', function() {
    var ele = this.form;
    clearForm(ele);
    changeFlag();
});


function changeFlag() {
    somethingChanged = true;
    $("#btnSave").attr("disabled", false);
    $("#formFlag").attr("checked", true);
}

$('.simpleForm').on('change', function(event) {

    changeFlag();
});