CODEWITHSUNDEEP
javascriptphp
Steve Price
Steve Price

Reputation: 600

Making a button unclickable after clicked once

I have got a code segment that i need to modify so that the button can only be clicked once.

I've tried various methods and not managed to succeed so far. I believe i need to use javascript, but it's really not my strong point and i'm a bit lost.

Any help would be gratefully received.

Code snippet is:

$the_button = '<input type="hidden" name="cart_quantity" value="1"/>' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit('add_to_cart3.jpg', BUTTON_IN_CART_ALT) . '<span id="button_cart" style="padding-left:6px;"></span>';

Upvotes: 0

Views: 1205

Answers (2)

Ja͢ck
Ja͢ck

Reputation: 173542

You would have to pepper it with some JavaScript like this:

$params = 'onclick="var me=this;setTimeout(function(){me.disabled=true;},1);"';
zen_image_submit('add_to_cart3.jpg', BUTTON_IN_CART_ALT, $params);

The third parameter of zen_image_submit() allows for extra tag parameters to be added.

Alternatively, you can use the fourth function argument to add a class:

zen_image_submit('add_to_cart3.jpg', BUTTON_IN_CART_ALT, '', 'disable-after-click');

Afterwards, you define a click handler based on its class name, e.g.:

var buttons = document.getElementsByClassName('disable-after-click'),
clickHandler = function() {
    var me = this;

    setTimeout(function() {
        me.disabled = true;
    }, 1);
};

for (var i = 0; i < buttons.length; ++i) {
    buttons[i].onclick = clickHandler;
}

Alternatively, you can do the above with jQuery.

Upvotes: 1

justinpage
justinpage

Reputation: 653

You need to apply JavaScript as a rule to the page that your button is rendered on. Specifically, you need to add an attribute of disabled upon click while preventing of the default to a click event:

$(function(){
  var button = $("input[type=submit]");
  button.on('click', function(e){
        button.attr("disabled", "disabled");
        e.preventDefault();
     });
})

I've demonstrated a quick way to implement this via JS Bin using jQuery.

Upvotes: 0

Related Questions