JavaScript not being called in inline event handler

Question

Here is my JavaScript:

Answer 1

I think you can try some changes in your code.

Your uploadForm() function must have only

reader.readAsDataURL(document.getElementById('file').files[0]);

All other things can be at document.ready();

This way the reader object will be ready and when you call the function the readAsDataURL will trigger the onLoad event.

Try this.

Answer 2

The uploadForm function is not in global scope, hence it cannot be found. Just define the function outside of the document.ready callback or make it global by assigning it to a property of the window object:

window.uploadForm = function() {
    // ...
};

Or a better way, since you are using jQuery, is to bind the event handler with jQuery instead of using inline event handlers:

$('#yourFormID').on('submit', function() {
    // ...
});

Answer 3

Function "uploadForm" is invisible by DOM, because function "uploadForm" is defined in another function. In your code , another function means : $(document).ready(function(){...}).

In jQuery, you can bind event like this:

HTML:

<form id="myFormID">
    ....
</form>

JS:

<script>
    //Make sure DOM is ready before mucking around.
    $(document).ready(function()
    {
        console.log('DOM is ready!');
        var socket = io.connect('http://localhost:8080');
        //Each document field will have the following identifiers:
        //classCode, description, professor, file
        function uploadForm()
        {
            //....
        };

        // ↓↓↓↓↓Bind events here↓↓↓↓↓
        $("#myFormID").submit(uploadForm);
    });
</script>

Answer 4

Onsubmit should be set to uploadForm() (that is, the expression you want evaluated), not just the name of the function you want executed.