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

Question

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?

have to check with js client side, server side is to late.

user557846
– user557846

2012-07-02 02:49:06 +00:00
Commented Jul 2, 2012 at 2:49 — user557846
– user557846, Commented Jul 2, 2012 at 2:49
stackoverflow.com/questions/610995/…

Tats_innit
– Tats_innit

2012-07-02 02:52:09 +00:00
Commented Jul 2, 2012 at 2:52 — Tats_innit
– Tats_innit, Commented Jul 2, 2012 at 2:52

Musa · Accepted Answer · 2012-07-02 03:23:07Z

4

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>'); 
}

edited Jul 2, 2012 at 3:23

answered Jul 2, 2012 at 2:48

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicholas DiPiazza · Accepted Answer · 2012-07-02 03:04:12Z

0

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/

answered Jul 2, 2012 at 3:04

Nicholas DiPiazza

10.7k14 gold badges102 silver badges175 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related