CODEWITHSUNDEEP
jquery
user1733583
user1733583

Reputation:

jQuery auto submit

I have 3 file inputs for uploading files as follows,

A File : <input type="file" name="AFile" id="AFile" />
B File: <input type="file" name="BFile" id="BFile" />
C File : <input type="file" name="CFile" id="CFile" />

I've used the following jQuery function to auto upload the 3 files when selected,

$("#AFile" && "#BFile" && "#CFile").change(function() { 
document.getElementById("UploadFile").submit();
});

The above function works fine only if AFile, BFile and CFile are selected in order and fails if selected out of the above order.

That is say if, CFile is selected first and then AFile the UploadFile gets auto submitted even before the third file (B file) is selected. The same error happens in any case of selectiong apart from the above success case.

AFile BFile CFile - Form with three files submitted
AFile CFile - form gets submitted even before third selection could be made, the same happens for any case apart from the A, B, C selection case.

Logically,

A B C AND
1 1 1  1
1 1 0  0
1 0 1  0
1 0 0  0
0 1 1  0
0 1 0  0
0 0 1  0
0 0 0  0

but this is not happening.

How do I solve this bug?

PS: I feel making 3 separate submission to the servlet or describing multiple selection cases using an or(||) is not a great way to do it, please post only if you have any other answer apart from these two approaches.

Upvotes: 1

Views: 91

Answers (4)

user1733583
user1733583

Reputation:

Here the problem is that in HTML && doesn't make any sense, and , is for OR and is for AND.

But again something like,

$("#LeftFile #RightFile #ConfigFile")

would mean, A and B and C instead of what I want as A and (B and C) as jQuery does not support operator overloading, and hence would not work and would consider only C.

So, finally I've used a counter to satisfy my condition that I must stick to single submit

var files = $("#LeftFile, #RightFile, #ConfigFile").change(function() {
var count = files.filter(function(){
    return this.value.length;
}).length;
if(count == files.length)
    {
        document.getElementById("UploadFile").submit();     
    }

});

Now this works irrespective of order of selection.

Upvotes: 0

devqon
devqon

Reputation: 13997

$("input:file").change(function () {

    var valid = true;

    $("input:file").each(function () {
        if ($(this).val() == "")
            valid = false;
    });
    if (valid)
        $("#UploadFile").submit();
});

example: http://jsfiddle.net/mu34j/1/

Upvotes: 0

martincarlin87
martincarlin87

Reputation: 11042

Quick Fiddle I made - http://jsfiddle.net/wnq5h/

jQuery

$('input[type="file"]').change(function() {
    var valid = 1;

    $('input[type="file"]').each(function() {
        if ($(this).val() == '') {
            valid = 0;
        }
    });

    if (valid === 1) {
        alert('submitting'); // $("#UploadFile").submit();
    } else {
        alert('not all files selected'); // return false;
    }
});

Upvotes: 0

jedison
jedison

Reputation: 976

Why not make them separate:

$("#AFile").change(function() { 
    document.getElementById("UploadFile").submit();
}); 
$("#BFile").change(function() { 
    document.getElementById("UploadFile").submit();
}); 
$("#CFile").change(function() { 
    document.getElementById("UploadFile").submit();
});

Alternatively, you could check if all 3 files have been selected before submitting.

Upvotes: 1

Related Questions