Hide and show textarea in odoo

user_13361114 0
Viewed 267

I have some questions:

<?xml version="1.0" encoding="utf-8" ?>
<odoo>
  <template id="product_configurator_configure" 
    inherit_id="sale.product_configurator_configure">
    <xpath expr="//div[@class='js_product main_product']" 
      position="replace">
      some code
    <div>
       <input type="checkbox" id="check_comment" class="o_website_form_input"> Option development 
          request</input>
       <textarea name="comment"  id="comment" class="o_website_form_input" cols="65" rows="4" 
          placeholder="Add new option"></textarea>
    </div>
  </xpath>
 </template>

How to create a javascript file (its structure) in odoo so that by clicking on the "checkbox" the field <textarea name = "comment" appears. How to connect a file to a template, what structure should it have, and how to set up an event listener?

odoo javascript
1 Answers

You need to alter the ProductConfiguratorFormRenderer renderer and bind the click event to the comment checkbox.

odoo.define('web.CustomFormRenderer', function (require) {
"use strict";

    var ProductConfiguratorFormRenderer = require('sale.ProductConfiguratorFormRenderer');

    ProductConfiguratorFormRenderer.include({

        events: _.extend({}, ProductConfiguratorFormRenderer.prototype.events, {
            'click #check_comment': 'onClickShowHideComment',
        }),

        onClickShowHideComment: function (ev) {
            let comment = $(ev.currentTarget).next();
            if(ev.currentTarget.checked) {
                comment.removeClass('o_hidden');
            } else {
                comment.addClass('o_hidden');
            }
        },
    });

});

To add the above code, check the Assets Management documentation.

Example:

  • Create a js file (custom_form_renderer.js) with the above code.
  • Inherit web.assets_backend and include the js file
<?xml version="1.0" encoding="utf-8" ?>
<odoo>
    <template id="assets_backend" name="Custom assets" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">
            <script type="text/javascript" src="/{module_name}/static/src/js/custom_form_renderer.js"></script>
    </template>
</odoo>
  • Add the xml file to the manifet.
user_54717090
Related