Ik heb vanmorgen rondgekeken en ik vind geen eenvoudige oplossingen… eigenlijk wil ik een wijziging in een invoerelement vastleggen, maar ook de vorige waarde weten.

Hier is een wijzigingsgebeurtenis en een invoerelement in zijn eenvoudigste vorm. Het is duidelijk dat ik de nieuwe waarde kan krijgen met $(elem).val(), maar is er een stiekeme methode die ik mis om de vorige waarde te krijgen? Ik zie niets in de jQuery API om dit te doen, maar misschien heeft iemand dit al gedaan en tips?

<script>
    $(document).ready(function(){
        $('#myInputElement').bind('change', function(){
            //var oldvalue = ???
            var newvalue = $(this).val();
        });
    });
</script>
<input id="myInputElement" type="text">

Ik ben niet tegen het schrijven van mijn eigen oplossing, ik wil er alleen zeker van zijn dat ik het wiel hier niet opnieuw maak.

Antwoord 1, autoriteit 100%

Een betere benadering is om de oude waarde op te slaan met .data. Dit bespaart de creatie van een globale var waar u vanaf moet blijven en houdt de informatie ingekapseld in het element. Een voorbeeld uit de praktijk waarom Global Vars slecht is, is gedocumenteerd hier

bijv.

<script>
    //look no global needed:)
    $(document).ready(function(){
        // Get the initial value
       var $el = $('#myInputElement');
       $el.data('oldVal',  $el.val() );
       $el.change(function(){
            //store new value
            var $this = $(this);
            var newValue = $this.data('newVal', $this.val());
       })
       .focus(function(){
            // Get the value when input gains focus
            var oldValue = $(this).data('oldVal');
       });
    });
</script>
<input id="myInputElement" type="text">

Antwoord 2, autoriteit 15%

Dit kan helpen:

$(document).ready(function() {
    $("input[type=text]").change(function() {
        $(this).data("old", $(this).data("new") || "");
        $(this).data("new", $(this).val());
        console.log($(this).data("old"));
        console.log($(this).data("new"));
    });
});

Demo hier

Antwoord 3, autoriteit 9%

$('#element').on('change', function() {
    $(this).val($(this).prop("defaultValue"));
});

Antwoord 4, autoriteit 4%

Je zou de waarde van het invoerveld kunnen laten kopiëren naar een verborgen veld wanneer de focus het invoerveld verlaat (wat zou moeten doen wat je wilt). Zie onderstaande code:

<script>
    $(document).ready(function(){
        $('#myInputElement').bind('change', function(){
            var newvalue = $(this).val();
        });
        $('#myInputElement').blur(function(){
            $('#myHiddenInput').val($(this).val());
        });
    });
</script>
<input id="myInputElement" type="text">

(niet getest, maar het zou moeten werken).

Antwoord 5, autoriteit 2%

Elk DOM-element heeft een attribuut met de naam defaultValue. U kunt die gebruiken om de standaardwaarde te krijgen als u alleen de eerste wijziging van gegevens wilt vergelijken.

Antwoord 6

In Russ-antwoord bindt hij de focusgebeurtenis. Ik denk niet dat het nodig is.

U kunt de oude waarde opslaan in de wijzigingsgebeurtenis.

<script>
    $(document).ready(function(){
        var newValue = $('#myInputElement').val();
        var oldValue;
        $('#myInputElement').change(function(){
            oldValue = newValue;
            newValue = $(this).val();
        });
    });
</script>
<input id="myInputElement" type="text">

Antwoord 7

Enkele punten.

Gebruik $.data in plaats van $.fn.data

// regular
$(elem).data(key,value);
// 10x faster
$.data(elem,key,value);

Vervolgens kunt u de vorige waarde verkrijgen via het gebeurtenisobject, zonder uw leven ingewikkelder te maken:

   $('#myInputElement').change(function(event){
        var defaultValue = event.target.defaultValue;
        var newValue = event.target.value;
    });

Wees gewaarschuwd dat defaultValue NIET de laatste ingestelde waarde is. Het is de waarde waarmee het veld is geïnitialiseerd. Maar u kunt $.data gebruiken om de “oldValue” bij te houden

Ik raad je aan om altijd het “event”-object in je event-handlerfuncties te declareren en ze te inspecteren met firebug (console.log(event)) of zoiets. Je zult daar veel nuttige dingen vinden die je zullen behoeden voor het maken/ openen van jQuery-objecten (wat geweldig is, maar als je sneller kunt zijn…)

Antwoord 8

Ik heb deze functies gemaakt op basis van de suggestie van Joey Guerra, bedankt daarvoor. Ik ben een beetje aan het uitwerken, misschien kan iemand het gebruiken. De eerste functie checkDefaults() wordt aangeroepen wanneer een invoer verandert, de tweede wordt aangeroepen wanneer het formulier wordt ingediend met jQuery.post. div.updatesubmit is mijn verzendknop en klasse ‘needsupdate’ is een indicator dat er een update is gemaakt maar nog niet is ingediend.

function checkDefaults() {
    var changed = false;
        jQuery('input').each(function(){
            if(this.defaultValue != this.value) {
                changed = true;
            }
        });
        if(changed === true) {
            jQuery('div.updatesubmit').addClass("needsupdate");
        } else {
            jQuery('div.updatesubmit').removeClass("needsupdate");
        }
}
function renewDefaults() {
        jQuery('input').each(function(){
            this.defaultValue = this.value;
        });
        jQuery('div.updatesubmit').removeClass("needsupdate");
}

Antwoord 9

Ik heb een vuile truc gevonden, maar het werkt, je zou de hover-functie kunnen gebruiken om de waarde vóór wijziging te krijgen!