1

I am new to Javascript and jquery and trying to learn

I made a submit button that stay disabled while the client doesn't upload an image. It is working fine. The submit button is called PROSEGUIR. What I am trying to do is... if the client try to click in the PROSEGUIR button while it is disabled, it pop up an alert msg.. but it is not working.

Check out the html button:

<input type="submit" disabled="disabled" name="proseguir" id="proseguir" value="Prosseguir >>" class="bg-red btn_next_two">

Is that right ?? NOw, I wrote this listener after jquery in 

<script>
   $(document).ready(function(){
      $("#proseguir").click(function(){
        if($(this).is('[disabled=disabled]') == true) {
          alert("Please upload an image before submitting");
        }
      });
   });
</script>

What am I doing wrong ? because it is not working. When the user click in PROSEGUIR button (submit) while it is disabled an alert pop up doesn't show up...

Please, help me !!

Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
ALessandro
  • 25
  • 7
  • 1
    Probably this might help you. https://stackoverflow.com/questions/16109228/clicking-a-disabled-input-or-button – Gunner Jul 13 '17 at 03:49

3 Answers3

1

when you element is disable you can't catch a click event. you can do like this:

<input type="submit" class="bg-red btn_next_two is_disable" name="proseguir" id="proseguir" value="Prosseguir">

javascript:

$('#proseguir').click(function (event) {
    if ($(this).hasClass('is_disable')) {
        alert('do some stuff');
    } else {
        alert('do some stuff when is enable');
    }
});

and when upload finished you can remove is_disable class with $('#proseguir').removeClass('is_disable')

Ebrahim Poursadeqi
  • 1,776
  • 2
  • 17
  • 27
1

You can check disabled by using prop() or simply by this.disabled like,

$(document).ready(function(){
   $("#proseguir").click(function(){ 
      if($(this).prop('disabled')) {  // or use this.disabled
          alert("Please upload an image before submitting"); 
      }
   });
});

But you can't trigger click event on a disabled element. See snippet,

$(document).ready(function() {
  $(".proseguir").click(function() {
    console.log(this.disabled);
    if ($(this).prop('disabled')) {
      alert("Please upload an image before submitting");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" disabled="disabled" name="proseguir" value="Prosseguir >>" class="bg-red btn_next_two proseguir"><br/>
<input type="submit" name="proseguir" value="Prosseguir >>" class="proseguir bg-red btn_next_two">

Instead of checking submit button disabled property, validate your input file element like,

$(document).ready(function() {
  $("#proseguir").click(function() {
    var fileName = $('#pfile').val();
    if (fileName == '') {
      alert("Please upload an image before submitting");
      return false; // to prevent form submit
    } else {
      alert('File is: ' + fileName);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="file" name="pfile" id="pfile" class="bg-red btn_next_two proseguir" /><br/>
  <input type="submit" id="proseguir" name="proseguir" value="Prosseguir >>" class="proseguir bg-red btn_next_two" />
</form>
Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
  • ROhan, I did exactly what you said. But for some crazy reason the submit button allow to go to next page yet that showing the ALERT POP UP of no file uploaded.. what is wrong ?? – ALessandro Jul 13 '17 at 05:17
  • You are using `submit` button in `form`, to prevent send data to form action use `return false;', if the file value is blank. Try my updated snippet. – Rohan Kumar Jul 13 '17 at 05:39
  • awesome ! it worked great !! I dont know how to thank you enough !! – ALessandro Jul 13 '17 at 06:05
  • @ALessandro welcome. Glad to know you have fixed it with my code snippet. – Rohan Kumar Jul 13 '17 at 06:11
  • Yes, your help was fundamental !! can you please give me your skype or other way to talk with you ?? give me here and delete after... just to keep in touch with you – ALessandro Jul 13 '17 at 06:42
  • Sure but may I know about your professional profile? – Rohan Kumar Jul 13 '17 at 06:43
  • I am not a coder. Sometimes I try something to friends. I own a smartphone shop. But trust me, I have a lot friends looking for good coders like you ! – ALessandro Jul 13 '17 at 06:54
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/149077/discussion-between-rohan-kumar-and-alessandro). – Rohan Kumar Jul 13 '17 at 07:12
1

Disabled elements don't fire events by design, so you can't capture a click on a disabled button.

You could just keep the button enabled and style it in some way, or you could fake the click by placing another element on top of it, like this

$(document).ready(function() {

  var inp = $('#proseguir'),
      div = $('<div />', {
          css: {
              height   : inp.outerHeight(),
              width    : inp.outerWidth(),
              top      : inp.offset().top,
              left     : inp.offset().left,
              zIndex   : 999
              position : 'absolute',
        
          },
          id : 'fakeBtn',
          on : {
              click: function() {
                  inp.trigger('click');
               }
          }
      }).appendTo(inp.parent());

  $('#uploadFiles').on('change', function() {
    $("#proseguir").prop('disabled', false);
    $('#fakeBtn').hide();
  });

  $("#proseguir").click(function() {
    if (this.disabled) {
      alert("Please upload an image before submitting");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="file" id="uploadFiles">
  <br /><br /><br />
  <input type="submit" disabled="disabled" name="proseguir" id="proseguir" value="Prosseguir >>" class="bg-red btn_next_two">
</form>
adeneo
  • 312,895
  • 29
  • 395
  • 388