Is er in jQuery een eenvoudige manier om te testen of eenvan de elementen van een formulier is gewijzigd?
Stel dat ik een formulier heb en een knop met de volgende click()
-gebeurtenis:
$('#mybutton').click(function() {
// Here is where is need to test
if(/* FORM has changed */) {
// Do something
}
});
Hoe kan ik testen of het formulier is gewijzigd sinds het is geladen?
Antwoord 1, autoriteit 100%
U kunt dit doen:
$("form :input").change(function() {
$(this).closest('form').data('changed', true);
});
$('#mybutton').click(function() {
if($(this).closest('form').data('changed')) {
//do something
}
});
Hiermee wordt een gebeurtenishandler change
gebruikt voor invoer in het formulier. Als een van deze wijzigingen wordt gebruikt, gebruikt deze .data()
om een changed
waarde in te stellen op true
, dan controleren we die waarde met de klik , dit veronderstelt dat #mybutton
zich in het formulier bevindt (indien niet, vervang dan gewoon $(this).closest('form')
door $('#myForm')
), maar je zou het nog algemener kunnen maken, zoals dit:
$('.checkChangedbutton').click(function() {
if($(this).closest('form').data('changed')) {
//do something
}
});
Referenties:Bijgewerkt
Volgens jQuery is dit een filter om alle formulierbesturingen te selecteren.
http://api.jquery.com/input-selector/
De :input-selector selecteert in principe alle formulierbesturingselementen.
Antwoord 2, autoriteit 36%
Als u wilt controleren of de formuliergegevens, zoals deze naar de server worden verzonden, zijn gewijzigd, kunt u de formuliergegevens serialiseren bij het laden van de pagina en deze vergelijken met de huidige formuliergegevens:
$(function() {
var form_original_data = $("#myform").serialize();
$("#mybutton").click(function() {
if ($("#myform").serialize() != form_original_data) {
// Something changed
}
});
});
Antwoord 3, autoriteit 24%
Een realtime en eenvoudige oplossing:
$('form').on('keyup change paste', 'input, select, textarea', function(){
console.log('Form changed!');
});
Antwoord 4, autoriteit 7%
Je kunt meerdere selectors gebruiken om een callback toe te voegen aan de wijzigingsgebeurtenis voor elk formulierelement.
$("input, select").change(function(){
// Something changed
});
BEWERKEN
Omdat je zei dat je dit alleen nodig hebt voor een klik, kun je eenvoudig mijn originele code hieraan aanpassen:
$("input, select").click(function(){
// A form element was clicked
});
BEWERK #2
Ok, je kunt een globaal instellen dat wordt ingesteld zodra iets als volgt is gewijzigd:
var FORM_HAS_CHANGED = false;
$('#mybutton').click(function() {
if (FORM_HAS_CHANGED) {
// The form has changed
}
});
$("input, select").change(function(){
FORM_HAS_CHANGED = true;
});
Antwoord 5, autoriteit 2%
Kijk naar de bijgewerkte vraag, probeer iets als
$('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");
});
});
Gebruik voor de oorspronkelijke vraag iets als
$('input').change(function() {
alert("Things have changed!");
});
Antwoord 6
$('form :input').change(function() {
// Something has changed
});
Antwoord 7
Hier is een elegante oplossing.
Er is een verborgen eigenschap voor elk invoerelement op het formulier dat u kunt gebruiken om te bepalen of de waarde al dan niet is gewijzigd.
Elk type invoer heeft zijn eigen eigenschapsnaam. Bijvoorbeeld
- voor
text/textarea
is dit defaultValue - voor
select
is het defaultSelect - voor
checkbox/radio
is dit defaultChecked
Hier is het voorbeeld.
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();
});
});
};
Loop nu gewoon door de formulieren op de pagina en u zou de verzendknoppen standaard uitgeschakeld moeten zien en ze zullen ALLEEN worden geactiveerd als u inderdaad een invoerwaarde op het formulier wijzigt.
$('form').each(function () {
bindFormChange($(this));
});
Implementatie als een jQuery
-plug-in is hier https://github.com/kulbida/ jwijzigbaar
Antwoord 8
var formStr = JSON.stringify($("#form").serializeArray());
...
function Submit(){
var newformStr = JSON.stringify($("#form").serializeArray());
if (formStr != newformStr){
...
formChangedfunct();
...
}
else {
...
formUnchangedfunct();
...
}
}
Antwoord 9
U heeft jQuery Form Observenodig inpluggen. Dat is wat je zoekt.
Antwoord 10
Uitbreiding van Udi’s antwoord, dit controleert alleen bij het indienen van formulieren, niet bij elke invoerwijziging.
$(document).ready( function () {
var form_data = $('#myform').serialize();
$('#myform').submit(function () {
if ( form_data == $(this).serialize() ) {
alert('no change');
} else {
alert('change');
}
});
});
Antwoord 11
$('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>
Antwoord 12
Probeer dit:
<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>
Antwoord 13
Ten eerste zou ik een verborgen invoer aan uw formulier toevoegen om de status van het formulier bij te houden. Dan zou ik dit jQuery-fragment gebruiken om de waarde van de verborgen invoer in te stellen wanneer iets in het formulier verandert:
$("form")
.find("input")
.change(function(){
if ($("#hdnFormChanged").val() == "no")
{
$("#hdnFormChanged").val("yes");
}
});
Als er op uw knop wordt geklikt, kunt u de status van uw verborgen invoer controleren:
$("#Button").click(function(){
if($("#hdnFormChanged").val() == "yes")
{
// handler code here...
}
});