JavaScript not being called in inline event handler

Question

Here is my JavaScript:

<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()
        {
            console.log('Creating FileReader object...');
            var reader = new FileReader();
            reader.onload = function(evt)
            {
                console.log('Read complete.');
                console.log('Creating JSON object...')
                var documentData = 
                {
                    'classCode':$('#classCode').val(),
                    'professor':$('#professor').val(),
                    'description':$('#description').val(),
                    'file': 
                        {
                            'data': evt.target.result,
                            'metadata': document.getElementById('file').files[0]
                        },
                    'dateUploaded':new Date(),
                    'rating':0 
                };
                console.log(documentData);
                console.log('Adding document.');
                socket.emit('addDocument', documentData);
            };
            console.log('Reading as binary string...');
            reader.readAsDataURL(document.getElementById('file').files[0]);
        };
    });
</script>

My HTML form:

<form onsubmit = 'uploadForm()'>
        <input type = 'text' placeholder = 'Class code' id = 'classCode' required/>
        <input type = 'text' placeholder = 'Document description' id = 'description' required/>
        <input type = 'text' placeholder = 'Professor' id = 'professor' required/>
        <input type = 'file' id = 'file' required/>
        <input type = 'submit' value = 'Upload!'/>
    </form>

This code was working before when I was calling uploadForm() via a .click event on the <input type='submit'> element, but that would ignore <form>'s required attribute check on the <input> elements. So now I am trying to call uploadForm() on the submit event of the <form>, but it is not running properly. reader.onload event should get called after reader.readDataAsURL() finishes, but this is not the case. I already tried jQuery's .submit() to no avail.

EDIT: Finally caught the error recording with my phone it. Uncaught ReferenceError: uploadForm is not defined

Felix Kling · Accepted Answer · 2012-12-26 02:59:02Z

3

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() {
    // ...
});

answered Dec 26, 2012 at 2:59

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Scott Hunter · Accepted Answer · 2012-12-26 02:46:34Z

0

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

answered Dec 26, 2012 at 2:46

Scott Hunter

50k12 gold badges65 silver badges107 bronze badges

1 Comment

user810606 Over a year ago

Still does not work. I also tried onsubmit = 'uploadForm();', onsubmit = 'uploadForm()', onSubmit = 'uploadForm();' and onSubmit = 'uploadForm()'

Felipe Fonseca · Accepted Answer · 2012-12-26 02:56:52Z

0

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.

answered Dec 26, 2012 at 2:56

Felipe Fonseca

1,1299 silver badges18 bronze badges

Comments

andyf · Accepted Answer · 2012-12-26 03:20:00Z

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>

Collectives™ on Stack Overflow

JavaScript not being called in inline event handler

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related