Как вы обрабатываете изменение формы в jQuery?
в jQuery есть простой способ проверить, изменились ли какие-либо элементы формы?
EDIT: Я должен был добавить, что мне нужно только проверить на click()
событие.
EDIT: Извините, я действительно должен был быть более конкретной! Скажем у меня есть форма и у меня есть кнопка со следующим:
$('#mybutton').click(function() {
// Here is where is need to test
if(/* FORM has changed */) {
// Do something
}
});
Как бы я проверил, изменилась ли форма с момента ее загрузки?
12 ответов:
вы можете сделать это:
$("form :input").change(function() { $(this).closest('form').data('changed', true); }); $('#mybutton').click(function() { if($(this).closest('form').data('changed')) { //do something } });
это буровые установки a
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 });
EDIT
поскольку вы упомянули, что вам нужно только это для щелчка, вы можете просто изменить мой исходный код на это:
$("input, select").click(function(){ // A form element was clicked });
EDIT #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
это значение по умолчанию- на
select
это defaultSelect- на
checkbox/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
var formStr = JSON.stringify($("#form").serializeArray()); ... function Submit(){ var newformStr = JSON.stringify($("#form").serializeArray()); if (formStr != newformStr){ ... formChangedfunct(); ... } else { ... formUnchangedfunct(); ... } }
вам нужно форма jQuery наблюдать плагин. Это то, что вы ищете.
расширение ответа 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") .find("input") .change(function(){ if ($("#hdnFormChanged").val() == "no") { $("#hdnFormChanged").val("yes"); } });
при нажатии на кнопку, Вы можете проверить состояние вашего скрытого ввода:
$("#Button").click(function(){ if($("#hdnFormChanged").val() == "yes") { // handler code here... } });
$('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>
В дополнение к выше @Иоеда ответ.
Если вы хотите, чтобы целевые поля в определенной форме (при условии, что существует более одной формы), чем просто поля, вы можете использовать следующий код:
$('form[name="your_form_name"] input, form[name="your_form_name"] select').click(function() { // A form element was clicked });