CODEWITHSUNDEEP
phpjqueryfile-upload
zeckdude
zeckdude

Reputation: 16163

How do I replace the submit button after checking if a file upload field is empty?

I have a file upload form:

<form method="post" enctype="multipart/form-data">
  <input type="file" name="image_1" /> 
  <input type="submit" name="upload_photo" id="upload_photo" />
</form>

I have a php script that uploads the file, but I noticed that whenever I upload a larger file, it may take up to 10 seconds for the form to submit and the page to reload. After the user clicks on the submit I would like for the submit button to be replaced with a message. I have written some jQuery that makes this work:

$("#upload_photo").click(function() {                       
  $("#upload_photo").replaceWith('<p>Image is uploading. Please wait...</p>');                      
});

This replaces the submit button just fine, but the problem is that it will also replace the submit button even if the file upload field is empty. Therefore, after the user clicks the submit button, I need to check if the field upload field has a value, and if it does to replace the button with the message. I have tried that here:

if($_FILES['image_1']['tmp_name'] != '') {
  $image_uploaded = true;
}

if($image_uploaded == true) { //If a file has been uploaded
  echo '<script type="text/javascript">
      $("#upload_photo").replaceWith("<p>The image is uploading. Please wait...</p>");
        </script>
  ';
}

Unfortunately, that doesn't work and the file uploads without replacing the submit button. I have tried substituting the .replaceWith line with an alert, but the form will upload the image, reload the page and then display the alert which is far too late.

How do I replace the submit button after checking if a file upload field is empty?

Upvotes: 1

Views: 244

Answers (2)

Musa
Musa

Reputation: 97672

Just check to see if there is a value in the file input field

if ($("[name=image_1]").val()){
    $("#upload_photo").replaceWith('<p>Image is uploading. Please wait...</p>'); 
}

Upvotes: 4

Nicholas DiPiazza
Nicholas DiPiazza

Reputation: 10585

I often handle this by doing this:

1) Disable the submit button

$(this).attr('disabled', 'disabled')

and 2) Change the text on the submit button.

$(this).attr('value', 'Please wait ...')

Here is a jsfiddle of this.

http://jsfiddle.net/Vqyc6/8/

Upvotes: 0

Related Questions