JavaScript \ JQuery - identifiant si la valeur du bouton radio a été modifiée par un clic

Question

J'ai une page qui affiche une liste d'enregistrements. L'utilisateur peut sélectionner l'état d'enregistrement à l'aide des boutons radio, .: par exemple

<div id="record_653"> 
    <label><input type="radio" name="status_653" value="new" checked/>new</label> 
    <label><input type="radio" name="status_653" value="skipped" />skipped</label> 
    <label><input type="radio" name="status_653" value="downloaded" />downloaded</label> 
</div> 

J'utilise JQuery pour envoyer les modifications apportées par l'utilisateur au serveur, où je les utilise pour mettre à jour la base de données. Ceci est une version simplifiée de ce que je fais:

$("#record_653").click( 
function(event) { 
    var url = ...,   
     params = ...; 
    post(url,params);      
}); 

Le problème est que ce code va créer des requêtes même si l'utilisateur clique sur le même bouton qui a déjà été vérifié. Ce que je veux vraiment, c'est l'événement "on change", sauf que son comportement dans Internet Explorer n'est pas très utile (par exemple here).

Donc, je suppose que je dois d'une manière ou d'une autre identifier si l'événement click a changé la valeur.

L'ancienne valeur est-elle stockée quelque part (dans le DOM? Dans l'événement?) Afin que je puisse comparer avec elle?

Sinon, comment dois-je stocker l'ancienne valeur?

Answer 1

L'ancienne valeur n'est pas stockée quelque part où vous pouvez l'interroger, non. Vous devrez stocker la valeur vous-même. Vous pouvez utiliser une variable javascript, un élément caché input ou la fonction data() de jQuery.

EDIT

La fonction jQuery data permet d'accéder à une structure de données de clé de valeur de couple comme un moyen pour stocker des données arbitraires pour un élément donné. Le api ressemble:

// store original value for an element 
$(selector).data('key', value); 

// retrieve original value for an element 
var value = $(selector).data('key'); 

Une plus développée pensée:

$(document).ready(function() { 

    // store original values on document ready 
    $(selector).each(function() { 
     var value = $(this).val(); 
     $(this).data('original-value', value); 
    }) 

    // later on, you might attach a click handler to the the option 
    // and want to determine if the value has actually changed or not. 
    $(selector).click(function() { 

     var currentValue = $(this).val(); 
     var originalValue = $(this).data('original-value'); 
     if (currentValue != originalValue) { 

      // do stuff. 

      // you might want to update the original value so future changes 
      // can be detected: 
      $(this).data('original-value', currentValue); 
     } 

    }); 

}); 

Answer 2

$('#record_653 input:radio').each(function() { 
    $(this).data('isChecked', $(this).is(':checked')); 

    $(this).click(function() { 
     if ($(this).is(':checked') !== $(this).data('isChecked')) { 
      // do changed action 
     } else { 
      $(this).data('isChecked', !$(this).data('isChecked')); 
     } 
    }) 

}); 

Cela a été compliqué à faire dans ma tête mais je pense que vous voulez quelque chose comme ça.

Answer 3

Comme cela a été suggéré par meder et Ken Browning, j'ai fini par utiliser les données de JQuery() pour stocker la valeur précédente et la vérifier à chaque clic.

Le stockage d'un booléen "is checked" pour chaque radio d'entrée est une solution. Cependant, vous devez conserver cette valeur. Ainsi, dans le gestionnaire d'événements click, en plus de changer le "is checked" de l'entrée courante, vous devez trouver l'entrée qui a été précédemment vérifiée et changer ses données "is checked" à false.

Ce que j'ai choisi de faire à la place était de stocker, dans l'élément parent, l'objet actuellement vérifié. Donc, mon code ressemble à:

$(document).ready( 
    function() { 
     // find the checked input and store it as "currChecked" for the record 
     $("#record_653").data("currChecked", 
          $(this).find("input:radio:checked")[0]); 
     // add the click event 
     $("#record_653").click(function(event) { 
       if ($(event.target).is("input:radio") && 
        event.target !== $(this).data("currChecked")) 
       { 
        $(this).data("currChecked", event.target); 
        handleChangeEvent(event); 
       } 
      }); 

     }); 
    } 
); 

Merci

Answer 4

J'ai eu le même problème, mais avec FF je réussi à traiter à l'aide de l'événement onchange plutôt que le onclick.

C'est exactement ce que je cherchais pour faire face à IE7. Fonctionne comme un charme! Merci pour la solution détaillée!