<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>
No comments:
Post a Comment