Check if input was not changed

Question

It is possible to check if a input was not changed using change() event?

I'm working with <input type='file' /> and i want to warning the user that no changes was made on his own action.

Right now, i just made a normal change() event:

 // fire the thumbnail (img preview)
$("#file-input").on("change", function () {
    readURL(this); // create the thumbnail
});

what i'm missing ?

Prev Solutuib:

well, i found a workaround for this, the real problem is that i give a option to the user to hide the thumbnail, and if he wants, open again...

but the thumbnail will only open when the user select a image, that's the problem, because the change event fire this option to open, so, if no change, no thumbnail open.

so, when i hide the thumbnail, i change the input file for a new one, making the change event always fire.

Value of a `file input` is a fakepath. Does your file input have a default value? How? — Ram, Aug 31 '12 at 19:21
@undefined - but it does get the filename, so it can be compared, just not with the change event, and of course not the path, as that will just be "fakepath" etc. — adeneo, Aug 31 '12 at 19:25
@adeneo Yes, it gets the filename, the question is how a file input can have a default value? Surely he want's to check the `file input` on submit event, so if the value of file input is empty he can alert something. — Ram, Aug 31 '12 at 19:26
i think FF generate a url file to make his preview always diferent, so change works perfect. the problem is with chrome, he just dont change anything and do not fire my `change` event — Ricardo Binns, Aug 31 '12 at 19:28
Chrome fires the change event if there actually is a change, if the same file is selected, it does not fire. — adeneo, Aug 31 '12 at 19:29
Yes, that's why i pop-up this question to see if we have any workaround to this problem. Can i run with other event? — Ricardo Binns, Aug 31 '12 at 19:31
@RicardoArruda - actually browsed past that solution [here](http://stackoverflow.com/questions/4109276/how-to-detect-input-type-file-change-for-the-same-file), but did'nt think it would fit this problem, good for you! — adeneo, Aug 31 '12 at 19:46
@adeneo change your answer with this solution and i accept. :) — Ricardo Binns, Aug 31 '12 at 19:51

score 6 · Accepted Answer · edited May 23 '17 at 12:12

6

Use a variable to store the last value of the input, and compare to the current value on change event, if they are the same, no change was made :

var last_value = $("#file-input").val();

$("#file-input").on("change", function () {
    if (this.value === last_value) alert('no change');
    last_value=this.value;
});

EDIT: Or you can always just replace the input tag with another, like this SO answer suggest :

var $c  = $("#container");
var $f1 = $("#container .f1");

function FChange() {
    alert("f1 changed");

    $(this).remove();
    $("<input type='file' class='f1' />").change(FChange).appendTo($c);
}

$f1.change(FChange);

edited May 23 '17 at 12:12

Community

1
1

answered Aug 31 '12 at 19:18

adeneo

312,895
29
395
388

1

but wouldn't the change event not fire if it wasn't changed? I may just be misreading the question... but I like your answer – MrOBrian Aug 31 '12 at 19:20
Have'nt tested it, but you might be right! Anyway, this was the best I could come up with ? – adeneo Aug 31 '12 at 19:22
And I tested, and you are right, selecting the same file over again does not trigger the change event. – adeneo Aug 31 '12 at 19:24
yeah, definitely, if no changes was mede, the change event do not fire, i can't validate anything inside the change. – Ricardo Binns Aug 31 '12 at 19:30
Can't seem to find a workaround, best I could think of would be to bind to the click function on the button, and if no change event was registered within a certain timeframe, it probably did'nt change! – adeneo Aug 31 '12 at 19:42

score 1 · Answer 2 · answered Aug 31 '12 at 19:21

<input type="file" id="file-input" data-url="intial-value" />

$("#file-input").on("change", function () {
    if($(this).val() != $(this).data('url'){
       //value has changed
       $(this).data('url', $(this).val())
    }
    else{
       return false;
    }

});

score 0 · Answer 3 · answered Aug 31 '12 at 19:25

0

 $("#file-input").on("change", function () {
    if($(this).data('last-val')){
        // do something
    } else {
       $(this).data('last-val',$(this).val());
       //do something else
    }
 });

answered Aug 31 '12 at 19:25

Draculater

2,280
1
24
29

Check if input was not changed

3 Answers3