CODEWITHSUNDEEP
javascriptjqueryelement
Jungmin
Jungmin

Reputation: 41

Detect change of an element and set it back to before?

$(document).ready(function () {

    $("#u22_input").on("change keyup paste", function () {
        $('#u25_img').attr('src', '');
    })

    if ($("#u22_input").val()) {
        $('#u25_img').attr('src', 'images/shirtnew/u25.png');
    }

});

Trying to detect the change of an text input which is working properly now..

But how to change the #u25_img src to its original value when text input (#u22_input) is empty?

Upvotes: 0

Views: 56

Answers (1)

Jaime Gomez
Jaime Gomez

Reputation: 7067

You can move the if statement into your event handler:

$(document).ready(function () {
    $("#u22_input").on("change keyup paste", function () {
        // Using a ternary operator instead of `if`
        // and trimming the value
        var src = $.trim(this.value).length > 0
                  ? 'images/shirtnew/u25.png'
                  : '';
        $('#u25_img').attr('src', src);
    });
});

If you want to execute the handler once on DOM ready you can trigger one of the events that your handler listens to:

$("#u22_input").on("change keyup paste", function () {
    var src = $.trim(this.value).length > 0 
              ? 'images/shirtnew/u25.png'
              : '';
    $('#u25_img').attr('src', src);
}).trigger('change'); // execute the handler immediately

Upvotes: 1

Related Questions