Hoe ga je om met een formulierwijziging in jQuery?

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 changegebruikt voor invoer in het formulier. Als een van deze wijzigingen wordt gebruikt, gebruikt deze .data()om een ​​changedwaarde in te stellen op true, dan controleren we die waarde met de klik , dit veronderstelt dat #mybuttonzich 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/textareais dit defaultValue
  • voor selectis het defaultSelect
  • voor checkbox/radiois 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>

Snippet uitvouwen


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...
    }
});

Other episodes