Sunday, May 13, 2012

jquery form change


In jQuery, is there a simple way to test if ANY of a forms elements have changed?



EDIT: I should have added that I only need to check on a click() event.



EDIT: Sorry I really should have been more specific! Say I have a form. And I have a button with the following: 





$('#mybutton').click(function() {

  //here is where is need to test.

  if( FORM has changed ) {

     do something

  }

});


how would I test if the form has changed since it was loaded?


Source: Tips4all
Post by On
Tags , ,

7 comments:

  1. UserMay 13, 2012 at 1:24 AM

    You can do this:

    $("form :input").change(function() {
    $(this).closest('form').data('changed', true);
    });
    $('#mybutton').click(function() {
    if($(this).closest('form').data('changed')) {
    //do something
    }
    });


    This rigs a change event handler to inputs in the form, if any of them change it uses .data() to set a changed value to true, then we just check for that value on the click, this assumes that #mybutton is inside the form (if not just replace $(this).closest('form') with $('#myForm')), but you could make it even more generic, like this:

    $('.checkChangedbutton').click(function() {
    if($(this).closest('form').data('changed')) {
    //do something
    }
    });

    ReplyDelete
  2. UserMay 13, 2012 at 1:24 AM

    You can use multiple selectors to attach a callback to the change event for any form element.

    $("input, select").change(function(){
    // Something changed
    });


    EDIT

    Since you mentioned you only need this for a click, you can simply modify my original code to this:

    $("input, select").click(function(){
    // A form element was clicked
    });


    EDIT #2

    Ok, you can set a global that is set once something has been changed like this:

    var FORM_HAS_CHANGED = false;

    $('#mybutton').click(function() {
    if (FORM_HAS_CHANGED) {
    // The form has changed
    }
    });

    $("input, select").change(function(){
    FORM_HAS_CHANGED = true;
    });

    ReplyDelete
  3. UserMay 13, 2012 at 1:24 AM

    $('form :input').change(function() {
    // Something has changed
    });

    ReplyDelete
  4. UserMay 13, 2012 at 1:24 AM

    You need jQuery Form Observe plugin. That's what you are looking for.

    ReplyDelete
  5. UserMay 13, 2012 at 1:24 AM

    First, I'd add a hidden input to your form to track the state of the form. Then, I'd use this jQuery snippet to set the value of the hidden input when something on the form changes:

    $("form")
    .find("input")
    .change(function(){
    if ($("#hdnFormChanged").val() == "no")
    {
    $("#hdnFormChanged").val("yes");
    }
    });


    When your button is clicked, you can check the state of your hidden input:

    $("#Button").click(function(){
    if($("#hdnFormChanged").val() == "yes")
    {
    // handler code here...
    }
    });

    ReplyDelete
  6. UserMay 13, 2012 at 1:24 AM

    Looking at the updated question try something like

    $('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("CHANGED!1123%%32");
    });
    });


    For the original question use something like

    $('input').change(function() {
    alert("Things have changed!");
    });

    ReplyDelete
  7. UserMay 13, 2012 at 1:24 AM

    If you want to check if the form data, as it is going to be sent to the server, have changed, you can serialize the form data on page load and compare it to the current form data:

    $(function() {

    var form_original_data = $("#myform").serialize();

    $("#mybutton").click(function() {
    if ($("#myform").serialize() != form_original_data) {
    // Something changed
    }
    });

    });

    ReplyDelete

Subscribe to: Post Comments (Atom)