ajax not submitting form

Question

I'm working on a file sharing service. However I ran into an issue. For some reason file is being selected however AJAX is not reading this selection and is not automatically uploading the file. And thus to this response is not being processed back and inserted into a DIV on the page.

HTML + FORM

        <div class="file-input-wrapper"> 
          <form method="post" enctype="multipart/form-data" action="upload.xml">
          <button class="btn-file-input" id="bt">Select a File to Share</button>
          <input type="file" name="file" multiple />
          </form>
          <br/><br/>
          <div id="response"></div>
         </div>

JAVASCRIPT

(function () {
    var input = document.getElementById("file"),
        formdata = false;

    function showUploadedItem(source) {
        document.getElementById("image-list").innerHTML = "<li><img src='" + source + "' /></li>";
    }

    if (window.FormData) {
       formdata = new FormData();
       document.getElementById("bt").style.display = "inline";
    }

    input.addEventListener("change", function (evt) {
        document.getElementById("response").innerHTML = "<div class='uploading'></div>"
        var i = 0,
            len = this.files.length,
            img, reader, file;
        formdata = new FormData();
        //for ( ; i < len; i++ ) {
        file = this.files[i];

        if (file.type.match(/file.*/)) {
            if (window.FileReader) {
                reader = new FileReader();
                reader.onloadend = function (e) {
                    var source = e.target.result;
                    document.getElementById("image-list").innerHTML = "<li><img src='" + source + "' /></li>";
                };
                reader.readAsDataURL(file);
            }
            if (formdata) {
                formdata.append("file[]", file);
            }
        }
        //}

        if (formdata) {
            $.ajax({
                    url: "upload.xml",
                    type: "POST",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        document.getElementById("response").innerHTML = res;
                    }
                });
        }
    }, false);
})();

The code originally worked however when I tried to style the file input filed this is when hell broke loose and things broke, and at this point i'm not sure what im doing wrong.

You can also take a look at the code live at this URL: cyogen.com

Answer 1

It is because your id is "bt" not "btn". At this line:

document.getElementById("btn").style.display = "none";