Search code examples
javascriptjquerymagentoprototypejs

Implement jquery into prototypejs

I've got this issue with my magento onepage checkout. I want to implement that when you press complete order it disables the button only when everything is filled in and the ToS are checked:

screenshot screenshot

you press "bestelling plaatsen" and not everything is filled in correctly it still turns gray.

Now I had the idea to implement the the custom code I used to make the button gray in the onepagecheckout script, but the issue is that the code I wrote is Javascript but the onepage checkout script is in prototypejs.

Here's the code from my script;

jQuery(document).ready(function($){
    var btn = $('#onestepcheckout-button-place-order');
    var btnTxt = $('#onestepcheckout-button-place-order span span span');
    var fewSeconds = 10;

    btn.click(function(){
        btn.prop('disabled', true);
        btnTxt.text('Even geduld A.U.B.');
        btn.addClass('disabled');

        setTimeout(function(){
            btn.prop('disabled', false);
            btnTxt.text('Bestelling plaatsen');
            btn.removeClass('disabled');
        }, fewSeconds*1000);
    });
});

and this is the code where I think it should be implemented in;

Event.observe('onestepcheckout-button-place-order', 'click', function(e) {
    var form = new VarienForm('one-step-checkout-form');
    var validator = new Validation(this.form);  
    if (validator.validate()) {         
        var element = e.element();
        //disable the button
        element.disabled = true;
        $('one-step-checkout-form').submit();
    }
    else {
        //alert('Error');
    }
});
Solution

  • Heres your code snippet in PrototypeJS

    document.observe('dom:loaded',function(){
    var fewSeconds = 10;
    $('onestepcheckout-button-place-order').observe('click',function(){
        var textelement = this.down('span span span');
        this.writeAttribute('disabled','disabled');
        textelement.update('Even geduld A.U.B.')
        this.addClassName('disabled');
        setTimeout(function(){
            this.writeAttribute('disabled',false);
            textelement.update('Bestelling plaatsen');
            this.removeClassName('disabled');
        }.bind(this),fewSeconds*1000)
    });

});

    I made some improvements to make the code more concise