Display a modal popup when clicking a disabled input button?

Question

I have an input submit button that is disabled. If someone clicks it, I'd like to display a pop up modal that basically expalins why that button is disabled.

The button is disabled because this specific product is out of stock, for instance. The modal will be explaining that.

My input button looks like this:

<input type="submit" id="StandardProductAddToCart" name="Add to Cart" value="ADD TO CART" alt="Add to Cart" style="cursor:not-allowed;" disabled="disabled"/>

possible duplicate of [Event on a disabled input](http://stackoverflow.com/questions/3100319/event-on-a-disabled-input) — JoDev, Mar 31 '14 at 14:31

score 2 · Answer 1 · edited May 23 '17 at 12:22

Answered before by Andy-e and found here: Event on a disabled input

Disabled elements don't fire mouse events. Most browsers will propagate an event originating from the disabled element up the DOM tree, so event handlers could be placed on container elements. However, Firefox doesn't exhibit this behaviour, it just does nothing at all when you click on a disabled element.

I can't think of a better solution but, for complete cross browser compatibility, you could place an element in front of the disabled input and catch the click on that element. Here's an example of what I mean:

<div style="display:inline-block; position:relative;">
  <input type="text" disabled />
  <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>

jquery:

$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});

Example: http://jsfiddle.net/RXqAm/170/ (updated to use jQuery 1.7 with prop instead of attr).

Really thanks for this. This worked, while other solutions failed. :) — nothing-special-here, Apr 24 '15 at 20:59

score 0 · Accepted Answer · answered Mar 31 '14 at 14:57

Browsers disable DOM events (like click) on form elements that are disabled. You could put a div around the submit button and attach a click function to that for when the submit button is disabled:

<div id="submit-div">
    <input type="submit" id="StandardProductAddToCart" name="Add to Cart" value="ADD TO CART" alt="Add to Cart" style="cursor:not-allowed;" disabled="disabled"/>
<div>

$('#submit-div').click(function(event){
    if ($('#StandardProductAddToCart').attr('disabled') == 'disabled')
    {
        /* Do your modal popup */
    }
});

This is just code from the top of my head, so it might not be exactly right. But you get the point.

Display a modal popup when clicking a disabled input button?

2 Answers2