Create multiple choice field types

Hi everyone, 

I trust you are all keeping well and safe during these unusual times.

Was wondering if anyone has ever created a multiple choice type field, either using radio buttons or tick boxes?

Similar to what we normally see during a survey.

Here'[s an example for radio buttons

or Checkbox type

Thank you in advance.

Parents
  • A very basic implementation would be the following:

    In the .hbs (handlebars of your view), put:

    <div>
        <label >Option one <input checked="checked" class='radio-but' type="radio" name="selection" value="1"></label>
                    
        <label >Option 2 <input class='radio-but' type="radio" name="selection" value="2"></label>            
    </div>

    to create the HTML elements you need. You should leverage handlebars functionalities so that you don't have to manually fill in 10 HTML elements, but just create a template, and fill it up.

    In the .js file (the controller of your view), you will need to go into the _renderHtml function, and collect the value from your radio button and then respectively do something with it.

    _renderHtml: function () {

        this._super('_renderHtml');
        $('input:radio[name="selection"]').change(function () {
            //do something with the selected radio option
            //e.g. console.log($(this).val()); will log the selected value
        });

    }
Reply
  • A very basic implementation would be the following:

    In the .hbs (handlebars of your view), put:

    <div>
        <label >Option one <input checked="checked" class='radio-but' type="radio" name="selection" value="1"></label>
                    
        <label >Option 2 <input class='radio-but' type="radio" name="selection" value="2"></label>            
    </div>

    to create the HTML elements you need. You should leverage handlebars functionalities so that you don't have to manually fill in 10 HTML elements, but just create a template, and fill it up.

    In the .js file (the controller of your view), you will need to go into the _renderHtml function, and collect the value from your radio button and then respectively do something with it.

    _renderHtml: function () {

        this._super('_renderHtml');
        $('input:radio[name="selection"]').change(function () {
            //do something with the selected radio option
            //e.g. console.log($(this).val()); will log the selected value
        });

    }
Children