When I click the submit button, why <div> does not show 'Loading...'? I have very less knowledge about jQuery and Ajax. Please help me with simple explanations. Thanks
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready( function(e) {
$(".frmUpload").on('submit',(function(e) {
e.preventDefault();
$(".upload-msg").text('Loading...');
});
});
</script>
</head>
<h1>Ajax Image Upload</h1>
<form action="" method="post" class="frmUpload">
<input type="file" name="photoUpload" id="ajaxUpload">
<input type="submit" value="UPLOAD">
</form>
<div class="img-preview"></div>
<div class="upload-msg"></div>
You've missed an ending ).
$(document).ready( function(e) {
$(".frmUpload").on('submit',(function(e) {
e.preventDefault();
$(".upload-msg").text('Loading...');
}));
});
Works better, notice the })). You don't strictly need the ( before the function in 'submit', (function , so you can alternatively remove that one.