Html Question posted in
Some basic documentation can be found here.

Html – function is not defined error on upload file page

Trying to make html page for uploading a file. I created a upload.cgi for the process. And added below code to my html page:


<form id="uploadForm" action="https://gpstest.surveybook.net/upload/upload.cgi" method="post" enctype="multipart/form-data">
    <label for="file_upload">Select a file:</label>
    <input type="file" name="file_upload" id="file_upload" onchange="uploadFile()"><br>
</form>


<script>
$(document).ready(function(){
    function uploadFile() {
        // Get the form element
        var form = document.getElementById('uploadForm');
        
        // Submit the form
        form.submit();
    }
})
</script>

It should upload when a file selected but i get error (in console) : "Uncaught ReferenceError: uploadFile is not defined"

Is it possible that i get this error because cant access to the upload.cgi, if not i am out of ideas and appreciate any help.

Thanks in advance.

Tags:

3

Answers


  1. 0

    The error "Uncaught ReferenceError: uploadFile is not defined" is occurring because the uploadFile function is defined inside the $(document).ready function, which makes it not accessible in the global scope. The onchange attribute in your HTML is trying to access uploadFile from the global scope, hence the error.

    To fix this, you should move the uploadFile function outside of the $(document).ready function.

    <script>
    function uploadFile() {
        // Get the form element
        var form = document.getElementById('uploadForm');
        
        // Submit the form
        form.submit();
    }

    $(document).ready(function(){
        // Other jQuery code can go here
    })
</script>
    <form id="uploadForm" action="https://gpstest.surveybook.net/upload/upload.cgi" method="post" enctype="multipart/form-data">
    <label for="file_upload">Select a file:</label>
    <input type="file" name="file_upload" id="file_upload" onchange="uploadFile()"><br>
</form>
    Login or Signup to reply.
  2. 0

    You’re encountering an issue because you’re defining a function after the DOM has loaded. Here, you have two options for updating your script:

    $(document).ready(function(){
    //Other codes
})
function uploadFile(){
    // Get the form element
    var form = document.getElementById('uploadForm');
        
    // Submit the form
    form.submit();
}

    or

    var uploadFile;
$(document).ready(function(){
    uploadFile = function(){
        // Get the form element
        var form = document.getElementById('uploadForm');
        
        // Submit the form
        form.submit();
    }
})
    Login or Signup to reply.
  3. 0

    Just remove $(document).ready , You don’t need that here

    <form id="uploadForm" action="https://gpstest.surveybook.net/upload/upload.cgi" method="post" enctype="multipart/form-data">
    <label for="file_upload">Select a file:</label>
    <input type="file" name="file_upload" id="file_upload" onchange="uploadFile()"><br>
</form>

<script>
    function uploadFile() {
        alert('You are in uploadFile!');
        // Get the form element
        var form = document.getElementById('uploadForm');

        // Submit the form
        form.submit();
    }
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search