我有一个网页,其中包含 40 个奇怪的控件,例如文本框、单选按钮、复选框、下拉菜单。我必须实现一个场景,如果用户更改任何控件的状态并希望在不保存页面的情况下离开页面,应用程序必须弹出一个弹出窗口。
我知道这需要在客户端完成,但这里的问题是如何检查 40 多个控件中的哪一个已更改。所有这些字段都不需要是强制性的。
我有一个网页,其中包含 40 个奇怪的控件,例如文本框、单选按钮、复选框、下拉菜单。我必须实现一个场景,如果用户更改任何控件的状态并希望在不保存页面的情况下离开页面,应用程序必须弹出一个弹出窗口。
我知道这需要在客户端完成,但这里的问题是如何检查 40 多个控件中的哪一个已更改。所有这些字段都不需要是强制性的。
您可以在页面加载时保存它们的值,然后在发送表单时将这些值与当前值进行比较。
此示例提醒已更改控件的 ID:
<script type="text/javascript">
$(document).ready(function () {
$('.inputToCheck').each(function () {
$(this).data("oldValue", $(this).val())
});
$('#btn').click(function () {
$('.inputToCheck').each(function () {
if ($(this).data("oldValue") != $(this).val())
alert($(this).attr('id'));
});
});
});
</script>
<input type="text" id="txt1" class="inputToCheck" value="10" />
<input type="text" id="txt2" class="inputToCheck" value="20" />
<input type="text" id="txt3" class="inputToCheck" value="30" />
<input type="button" id="btn" value="send" />