Enable Dark Mode!
how-to-enable-disable-terms-conditions-button-on-odoo-15-website.jpg
By: Sachin T

How to Enable/Disable Terms & Conditions Button on Odoo 15 Website

Technical Odoo 15

We have seen many website forms that can be submitted only upon accepting its terms and conditions. This blog will help you to create a simple form in which we will add the terms and conditions field, and only when a user agrees to the terms and conditions the submit button should become active and clickable. In all other cases, the submit button should stay unclickable.

Here you can see the terms and conditions field along with the submit button in the form,

how-to-enable-disable-terms-conditions-button-on-odoo-15-website-cybrosys

In the above screenshot, the terms and conditions are not agreed and hence the submit button is in the disable state to click. Let us see how it is done.

<div class="form-group row form-field">
    <div class="custom-control custom-checkbox float-right mt-2 oe_accept_cgv_button">
        <label for="terms_con">
            <input type="checkbox" id="terms_conditions" name="terms_conditions" />
            I/We agree to return any part replaced under warranty within a 2 week period of this form being completed,
            I/We agree that if the part or parts are not returned in this time I/We will be charged for the replacement
            part or parts
        </label>
    </div>
    <br />
    <div style="padding:0 45% 0 45%">
        <button type="submit" id="warranty_submit" class="btn btn-primary btn-md o_website_form_send">Submit
        </button>
    </div>
</div>

Here we have defined a div element inside which we added the terms and conditions field with a valid id and name. A new div element is defined to add the submit button with a valid id and type as submit.

Now we can add the javascript function to perform our need,

$(document).ready(function () {
    if ($("#terms_conditions").val()) {
        document.getElementById("warranty_submit").disabled = true;
        var checker = document.getElementById('terms_conditions');
        var sendbtn = document.getElementById('warranty_submit');
        checker.onchange = function () {
            if (checker.checked) {
                sendbtn.disabled = false;
            } else {
                sendbtn.disabled = true;
            }
        }
    }
});

Here, we are using the id of the terms and conditions input field to perform the onchange function, and we are conditionally making the button state disabled using its id.

In this way, we can make the submit button disabled or enabled based on the terms and conditions in a form view. Once a user agrees to the submit button, It will look as shown below.

how-to-enable-disable-terms-conditions-button-on-odoo-15-website-cybrosys

In this way, you can enable or disable the submit button based on the terms and conditions on Odoo Website.


If you need any assistance in odoo, we are online, please chat with us.



0
Comments



Leave a comment

 
whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

London

Cybrosys Limited
Alpha House,
100 Borough High Street, London,
SE1 1LB, United Kingdom

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message