onchange event not firing when changed

Question

I have this in my html, which works:

           <input id="File1" type="file" runat="server" onchange="fileUpload(value)"  />

But for IE8 and below I have a button to create a new input: type=file It is working and uploads the file.

But I need to send the value to a function first.

            newUploadBox.setAttribute("onchange", "fileUpload(value)");

Now when I go into inspect element, everything looks right.

It renders out like the original input.

Unfortunately, it does not go to the function like the first one does.

I fond some post on here: Dynamically added SELECT element does not fire onchange event in Internet Explorer && onchange with alert not working in ie

But none are able to help me.

https://jsfiddle.net/satjzr6z/

How are you declaring fileUpload? Can you provide a fiddle/more code? — swornabsent, May 29 '15 at 14:31
https://jsfiddle.net/satjzr6z/ It will work in modern browsers. Not IE8 — Christian4423, May 29 '15 at 14:42

score 1 · Answer 1 · answered May 29 '15 at 14:33

1

Try this code

newUploadBox.onchange = fileUpload.bind(this, value);

function.prototype.bind - creates a bound function that has the same body as the original function

Method description

answered May 29 '15 at 14:33

Microshine

731
5
19

This would work but not for my application. I need a more dynamic solution. Thank you though. I will still upvote this. – Christian4423 May 29 '15 at 15:59

score 1 · Answer 2 · answered May 29 '15 at 15:57

I added a onClientClick event handler to check the validation for me instead of doing an onchange event listener.

I used the following function:

function FileUploadValidate() {
var input;
var thisId;
var fileInput;

input = document.getElementsByTagName("input");

for(i = 0;i < input.length; i++)
{
    if(input[i].getAttribute("type") === "file"){
        thisId = input[i].getAttribute("id"); 
        fileInput = document.getElementById(thisId);
        fileUpload(fileInput.value, thisId)

    }
}

for(i = 0;i < input.length; i++)
{
    if(input[i].getAttribute("type") === "file"){
        thisId = input[i].getAttribute("id"); 
        if(document.getElementById(thisId).style.backgroundColor === "#ff0000"){
            alert("true")
            document.getElementById("decoyBtn").innerText = "Check"
            return
        }else{
            document.getElementById("decoyBtn").style.display = "none"
            document.getElementById("btnSubmit").style.display = "inline"

        }


    }
  } 
}

This will parse through all my file upload input fields. If one doesnt meet my requirements it will not allow them to upload. It is the best work around I could come up with that would work in IE8.

I also used a decoy button that would basically be my "onClientClick" because I didnt want an accidental upload.

The second for each loop checks the condition of all of them validating and if they do it will take the decoy button off the DOM and bring in the ASP.NET button for upload.

onchange event not firing when changed

2 Answers2