CODEWITHSUNDEEP
jquerybutton
shane
shane

Reputation: 31

disable a button with jquery

I've searched through this site, can't find an answer to my problem..

I have a HTML form that can upload multiple images. looks like this

    <form enctype="multipart/form-data" method="post">
  <p>
   <label for="image1">File number 1 to upload:</label>
   <input id="image1" type="file" name="file[]" >
  </p>
        <p>
   <label for="image1">File number 1 to upload:</label>
   <input id="image1" type="file" name="file[]" >
  </p>
    //etc etc
    </form>

What I want to do, is disable each 'choose file' button after an image has been selected..

If this is not possible is there any way I can put display a 'success' message after each has been selected? (there can be up to as many as 20 upload buttons..)

Thanks

Upvotes: 3

Views: 431

Answers (5)

shane
shane

Reputation: 31

Thanks to everyone for their help, but none worked! Every time I used a script to disable a button, it cancelled the upload.

I really only needed a visual clue that a button had been clicked so I came up with this and it works a treat in my PHP page.

$(".classclick$count").click(function(){

    $(".classclick$count").append("<span style=color:red;> < DONE </span>");

});

Upvotes: 0

liamfriel
liamfriel

Reputation: 107

I think this is a correct listener for all image input types.

$(document).ready(function() {
  //for all image inputs
  $("input:file").change(function(){
    //check if an image is submitted
    if(this.value){
        //disable element
        $(this).attr("disabled", true); 
    }
  });

});

Upvotes: 1

user113716
user113716

Reputation: 322452

You have duplicate IDs "image1". Perhaps this is just in your question, but if it's in your code, be aware that it isn't valid.

Here's a little quicker way:

$('input:file').change(function() {
    this.disabled = !!this.value;
});

Upvotes: 2

Jacob Relkin
Jacob Relkin

Reputation: 163228

Use the change event:

$('input[type="file"]').change(function() {
    if($(this).val().length)
       $(this).attr('disabled','disabled'); 

});

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382616

Try this:

$(function(){
  $('#formID :file').change(function(){
    // if there is some value specified
     if (this.value){
       $(this).attr('disabled', 'disabled');
     }
  });
});

The code is supposed to disable a file field after a file has been specified. Although I don't think this is good practice because a user might want to specify a different file too.

Upvotes: 1

Related Questions