Nothing happens when I click on the “Upload” button

Question

Below is my javascript code and what I want to happens is that when the user clicks on the "Upload" button in the form, it does a check in the "imageValidation" to see if the file input is correct, if so then it goes onto the "startImageUpload()" function, if file input is incorrect then it should display an alert stating "not an image" and it shouldn't go to the 'startImageUpload' function.

Problem is that it is not doing this at all. When the user clicks on the "Upload" button then no alert appears, no upload happens, nothing happens. What do I need so that I can achieve the above paragraph?

Below is the form:

var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='imageClickHandler(this); return false;' class='imageuploadform' >" + 
"<label> Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/>" +
"<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label></form>");

Below is the function where when the user clicks on the "Upload" button, it follows this function below:

  function imageClickHandler(){ 
     if(imageValidation()){ 
     startImageUpload(imageuploadform); 
     } 
}

Below is the imageValidation() function where it validates the file input but I do not know if this is working correctly?

function imageValidation() {

        $(".fileImage").change(function() {

          var val = $(this).val();

        switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
            case 'gif': case 'jpg': case 'png':
                return true;
                break;
            default:
                $(this).val('');
                // error message here
                alert("not an image");
                return false;
                break;
        }

    });

    }

Below is the 'startImageUpload()' function which I know it works before attempting to validate the input file.

function startImageUpload(imageuploadform){

  $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
  $(imageuploadform).find('.imagef1_cancel').css('visibility','visible');
  $(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden');
  sourceImageForm = imageuploadform;

      return true;
}  

Answer 1

your onsubmit always returns false ...

change it to return the result of imageClickHandler

 <form .... onsubmit="return imageClickHandler(this);">

and change the JS function to return value

 function imageClickHandler(form){ 
      if(imageValidation()){ 
          return startImageUpload(form); 
      } 
      return false;
  }

also - make sure that your imageValidation function has a default return value (add return false; at the last row of the function)

EDIT:

in order to prevent the validation from being happened when the user chooses file, remove the listening to the change event, and change your validation to:

function imageValidation() {
    var val = $(".fileImage").val();
    switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
        case 'gif':
        case 'jpg': 
        case 'png':
             return true;
        default:
            $(".fileImage").val('');
            // error message here
            alert("not an image");
            return false;
    }
    return false;
}

Answer 2

A couple of things. First, the outcome of validation could trigger one of 2 outcomes: do it, or alert. But the outcome for alert is down inside the validate function, not up top after result is returned using result is returned. Suggest moving it up and using if-then-else. A code style thing.

Second, imageClickHandler is using a JS object called imageuploadform. Don't see such a JS object defined anywhere. There is a dom element with a imageuploadform class attached to it. But that's not the same thing. Granted the entire html/js isn't shown.

Third, an argument is passed to imageClickHandler but the function definition doesn't define any arguments. What was the intent?

If you get stuck try sprinkling alert messages everywhere temporarily to trace program execution. That may tell you where execution is going, or isn't.

As Yaron said, if startUpload isn't doing the actual upload in the background, then you must return the potentially 'true' result from onClick. Returning 'false' ensures it will never go to the php page.

function imageClickHandler(){ 
   var imageuploadform = $('form.imageuploadform').get(0);
   if(imageValidation()){  
      startImageUpload(imageuploadform); 
      return true; 
   } 
   else {
      alert("not an image");
      return false;
   } 
}

function imageValidation() { 

   $(".fileImage").change(function() { 

      var val = $(this).val(); 

      switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){ 
         case 'gif': case 'jpg': case 'png': 
            return true; 
            break; 
         default: 
            return false; 
            break; 
      } 

   }); 

}

var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return imageClickHandler();' class='imageuploadform' >" +  
"<label> Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/>" + 
"<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label></ 

Answer 3

Have you tried removing the switch completely from the validation and just returning an alert() for testing purposes?

is perhaps your variable of 'val' confusing itself with the jQuery val()? Try using a different var name?

  var val = $(this).val();
            $(this).val('');