[英]How do you handle a form change in jQuery?
在 jQuery 中,是否有一種簡單的方法來測試表單的任何元素是否已更改?
假設我有一個表單,並且有一個帶有以下click()
事件的按鈕:
$('#mybutton').click(function() {
// Here is where is need to test
if(/* FORM has changed */) {
// Do something
}
});
我將如何測試表單自加載以來是否已更改?
你可以這樣做:
$("form :input").change(function() {
$(this).closest('form').data('changed', true);
});
$('#mybutton').click(function() {
if($(this).closest('form').data('changed')) {
//do something
}
});
這將change
事件處理程序綁定到表單中的輸入,如果其中任何一個更改它使用.data()
將changed
值設置為true
,然后我們只需在單擊時檢查該值,這假設#mybutton
在表單(如果不只是將$(this).closest('form')
替換$('#myForm')
),但您可以使其更加通用,如下所示:
$('.checkChangedbutton').click(function() {
if($(this).closest('form').data('changed')) {
//do something
}
});
參考:更新
根據 jQuery,這是一個選擇所有表單控件的過濾器。
http://api.jquery.com/input-selector/
:input 選擇器基本上選擇所有表單控件。
如果要檢查將要發送到服務器的表單數據是否已更改,您可以在頁面加載時序列化表單數據並將其與當前表單數據進行比較:
$(function() {
var form_original_data = $("#myform").serialize();
$("#mybutton").click(function() {
if ($("#myform").serialize() != form_original_data) {
// Something changed
}
});
});
一個實時且簡單的解決方案:
$('form').on('keyup change paste', 'input, select, textarea', function(){
console.log('Form changed!');
});
您可以使用多個選擇器將回調附加到任何表單元素的更改事件。
$("input, select").change(function(){
// Something changed
});
編輯
既然你提到你只需要點擊一下,你可以簡單地將我的原始代碼修改為:
$("input, select").click(function(){
// A form element was clicked
});
編輯#2
好的,您可以設置一個全局設置,一旦某些內容發生更改,則設置如下:
var FORM_HAS_CHANGED = false;
$('#mybutton').click(function() {
if (FORM_HAS_CHANGED) {
// The form has changed
}
});
$("input, select").change(function(){
FORM_HAS_CHANGED = true;
});
查看更新的問題嘗試類似
$('input, textarea, select').each(function(){
$(this).data("val", $(this).val());
});
$('#button').click(function() {
$('input, textarea, select').each(function(){
if($(this).data("val")!==$(this).val()) alert("Things Changed");
});
});
對於原始問題,請使用類似
$('input').change(function() {
alert("Things have changed!");
});
這是一個優雅的解決方案。
表單上的每個輸入元素都有一個隱藏屬性,您可以使用它來確定值是否已更改。 每種類型的輸入都有自己的屬性名稱。 例如
text/textarea
它是defaultValueselect
它是defaultSelectcheckbox/radio
它是defaultChecked這是示例。
function bindFormChange($form) {
function touchButtons() {
var
changed_objects = [],
$observable_buttons = $form.find('input[type="submit"], button[type="submit"], button[data-object="reset-form"]');
changed_objects = $('input:text, input:checkbox, input:radio, textarea, select', $form).map(function () {
var
$input = $(this),
changed = false;
if ($input.is('input:text') || $input.is('textarea') ) {
changed = (($input).prop('defaultValue') != $input.val());
}
if (!changed && $input.is('select') ) {
changed = !$('option:selected', $input).prop('defaultSelected');
}
if (!changed && $input.is('input:checkbox') || $input.is('input:radio') ) {
changed = (($input).prop('defaultChecked') != $input.is(':checked'));
}
if (changed) {
return $input.attr('id');
}
}).toArray();
if (changed_objects.length) {
$observable_buttons.removeAttr('disabled')
} else {
$observable_buttons.attr('disabled', 'disabled');
}
};
touchButtons();
$('input, textarea, select', $form).each(function () {
var $input = $(this);
$input.on('keyup change', function () {
touchButtons();
});
});
};
現在只需循環瀏覽頁面上的表單,您應該會看到默認情況下禁用提交按鈕,並且只有當您確實要更改表單上的某些輸入值時,它們才會被激活。
$('form').each(function () {
bindFormChange($(this));
});
作為jQuery
插件的實現在這里https://github.com/kulbida/jmodifiable
$('form :input').change(function() {
// Something has changed
});
var formStr = JSON.stringify($("#form").serializeArray());
...
function Submit(){
var newformStr = JSON.stringify($("#form").serializeArray());
if (formStr != newformStr){
...
formChangedfunct();
...
}
else {
...
formUnchangedfunct();
...
}
}
擴展 Udi 的答案,這只檢查表單提交,而不是每次輸入更改。
$(document).ready( function () {
var form_data = $('#myform').serialize();
$('#myform').submit(function () {
if ( form_data == $(this).serialize() ) {
alert('no change');
} else {
alert('change');
}
});
});
你需要jQuery Form Observe插件。 這就是你要找的。
$('form[name="your_form_name"] input, form[name="your_form_name"] select').click(function() { $("#result").html($(this).val()); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2>Form "your_form_name"</h2> <form name="your_form_name"> <input type="text" name="one_a" id="one_a" value="AAAAAAAA" /> <input type="text" name="one_b" id="one_b" value="BBBBBBBB" /> <input type="text" name="one_c" id="one_c" value="CCCCCCCC" /> <select name="one_d"> <option value="111111">111111</option> <option value="222222">222222</option> <option value="333333">333333</option> </select> </form> <hr/> <h2>Form "your_other_form_name"</h2> <form name="your_other_form_name"> <input type="text" name="two_a" id="two_a" value="DDDDDDDD" /> <input type="text" name="two_b" id="two_b" value="EEEEEEEE" /> <input type="text" name="two_c" id="two_c" value="FFFFFFFF" /> <input type="text" name="two_d" id="two_d" value="GGGGGGGG" /> <input type="text" name="two_e" id="two_f" value="HHHHHHHH" /> <input type="text" name="two_f" id="two_e" value="IIIIIIII" /> <select name="two_g"> <option value="444444">444444</option> <option value="555555">555555</option> <option value="666666">666666</option> </select> </form> <h2>Result</h2> <div id="result"> <h2>Click on a field..</h2> </div>
除了以上@JoeD 的回答。
如果您想針對特定表單中的字段(假設有多個表單)而不僅僅是字段,您可以使用以下代碼:
$('form[name="your_form_name"] input, form[name="your_form_name"] select').click(function() {
// A form element was clicked
});
嘗試這個:
<script>
var form_original_data = $("form").serialize();
var form_submit=false;
$('[type="submit"]').click(function() {
form_submit=true;
});
window.onbeforeunload = function() {
//console.log($("form").submit());
if ($("form").serialize() != form_original_data && form_submit==false) {
return "Do you really want to leave without saving?";
}
};
</script>
首先,我會在您的表單中添加一個隱藏輸入來跟蹤表單的狀態。 然后,當表單上的某些內容發生更改時,我將使用此 jQuery 代碼段來設置隱藏輸入的值:
$("form")
.find("input")
.change(function(){
if ($("#hdnFormChanged").val() == "no")
{
$("#hdnFormChanged").val("yes");
}
});
單擊按鈕時,您可以檢查隱藏輸入的狀態:
$("#Button").click(function(){
if($("#hdnFormChanged").val() == "yes")
{
// handler code here...
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.