CODEWITHSUNDEEP
javascriptjqueryhtml
whoopididoo
whoopididoo

Reputation: 431

Uncaught ReferenceError: onsubmit function is not defined

OK So its kind of the same but not entirely. I had a function and variables that needed to be moved out of the document.ready function

This is my error;

Uncaught ReferenceError: ValidateFile is not defined I have looked at other solutions for this problem but none is working for me.

If I move the function ValidateFile() to the head section then I get an error that type is not defined.

What am I missing please? Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<title>Choose a file to upload</title>
</head>
<body>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css">

<script type="text/javascript">

$(document).ready(function(){

    var file;
    var name; 
    var size;
    var type;

 window.addEventListener('message',function(event) {
    //if(event.origin !== 'http://demo.dev) return;
        alert('message received:  ' + event.data,event);
        event.source.postMessage('hola back !',event.origin);
    },false);
$('progress').hide();
$('#pleasewait').hide();

function ValidateFile(){
    var formData = new FormData($('form')[0]);
    var str=type.substring(0,5);
    if (str!='image'){
        alert( 'the file '+ name +' is not a valid image, Please upload only image files, thank you. The management!');
    }else{
        //alert(' I got the file : ' + formData + ' file: ' +file+' name: '+name+' size: '+size+' type: '+type );
        $('progress').show();
        $('#pleasewait').show();
    }
}

$(':file').change(function(){
    file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
}); 

});

</script>
<p><h1>Choose a file to upload</h1></p>
<form name="UploadForm" enctype="multipart/form-data" class="form" action="/api/v2/process_images" method="post" onsubmit="javascript: return ValidateFile();" >
File: <input type="file" name="file1" />


<input type="submit" value="upload" id="upload_image"/>
</form>
<progress ></progress>
        &nbsp;&nbsp;
    <h4 id='pleasewait'>Please wait a few seconds. Uploading and spliting your image into different sizes</h4>


</body>
</html>

Upvotes: 0

Views: 6065

Answers (2)

srinath madusanka
srinath madusanka

Reputation: 592

try

<script type="text/javascript">
   var file;
    var name; 
    var size;
    var type;
function ValidateFile(){
    var formData = new FormData($('form')[0]);
    var str=type.substring(0,5);
    if (str!='image'){
        alert( 'the file '+ name +' is not a valid image, Please upload only image files, thank you. The management!');
    }else{
        //alert(' I got the file : ' + formData + ' file: ' +file+' name: '+name+' size: '+size+' type: '+type );
        $('progress').show();
        $('#pleasewait').show();
    }
}

$(document).ready(function(){



 window.addEventListener('message',function(event) {
    //if(event.origin !== 'http://demo.dev) return;
        alert('message received:  ' + event.data,event);
        event.source.postMessage('hola back !',event.origin);
    },false);
$('progress').hide();
$('#pleasewait').hide();



$(':file').change(function(){
    file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
}); 

});

</script>

Upvotes: 1

Shailendra Sharma
Shailendra Sharma

Reputation: 6992

Your function is defined within the scope of the $(document).ready() callback and cannot be seen from the outside. Either define the function outside the $(document).ready() scope of call it only from within.

put your ValidateFile() out side of document.ready will work

Upvotes: 2

Related Questions