formBuilder: typeUserAttrs, doesn't render checkbox checked property correctly

Description:

Perhaps I am missing something but if I create a new custom attribute using typeUserAttr of type checkbox, when I render the form with existing data the checkbox is not checked if the value is true. This seems to work correctly for the required field.

Environment Details:

formBuilder Version:
Browser: Chrome
OS:

Expected Behavior

Inserting formData for custom attributed will correctly check checkboxes.

Actual Behavior

The value attribute of the custom field is set to true but the box is not checked

Steps to Reproduce

jQuery(function($) {
  var fbTemplate = document.getElementById('build-wrap');
var options = {
      disabledActionButtons: [
        'data',
        'clear'
      ],
      disableFields: [
        'button',
        'autocomplete',
        'hidden',
        'file',
        'date',
        'header',
        'number'
      ],
      disabledAttrs: [
        'access',
        'multiple',
        'toggle',
        'placeholder',
        'className',
        'inline',
        'other',
        'subtype',
        'description',
        'maxlength',
        'rows'
      ],
      typeUserAttrs: {
        'radio-group': {
          randomize: {
            label: 'Randomize',
            type: 'checkbox'
          },
          feedback: {
            label: 'Feedback',
            type: 'text',
            placeholder: 'Insert feedback for this question here'
          }
        },
        'textarea': {},
        'checkbox-group': {
          randomize: {
            label: 'Randomize',
            type:"checkbox"
          },
          feedback: {
            label: 'Feedback',
            type: 'text',
            placeholder: 'Insert feedback for this question here'
          }
        },
        'select': {
          randomize: {
            label: 'Randomize',
            type: 'checkbox'
          },
          feedback: {
            label: 'Feedback',
            type: 'text',
            placeholder: 'Insert feedback for this question here'
          }
        },
        'text': {
          content: {
            label: 'Content',
            type: 'textArea',
            placeholder: 'Insert feedback for this question here'
          },
          feedback: {
            label: 'Feedback',
            type: 'text',
            placeholder: 'Insert feedback for this question here'
          }
        },
        'paragraph': {
          name: {
            label: 'Name',
            type: 'text'
          }
        }
      },
      formData: '[{"type":"checkbox-group","label":"Checkbox Group","name":"checkbox-group-1501853553952","feedback":"","randomize":true,"values":[{"label":"Option 1","value":"option-1","selected":true}]}]',
      dataType: 'json',
      layoutTemplates: {
        label: function (label, data) {
          return $('<label class="bright"/>')
            .attr('for', data.id)
            .append(label);
        }
      }
    };

  $(fbTemplate).formBuilder(options);
});

The value of the field randomize is set to true, but the box is not checked on load

Screenshot - (optional)

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15 (3 by maintainers)

Commits related to this issue

feat: getCurrentFieldId fix: typeUserAttr checkbox behavior, resolves #571 — committed to kevinchappell/formBuilder by kevinchappell 4 years ago
feat: getCurrentFieldId fix: typeUserAttr checkbox behavior, resolves #571 — committed to kevinchappell/formBuilder by kevinchappell 4 years ago
chore(release): 3.3.0 [skip ci] # [3.3.0](https://github.com/kevinchappell/formBuilder/compare/v3.2.6...v3.3.0) (2020-01-26) ### Bug Fixes * **demo:** clear current id when removed from stage ([e0c... — committed to kevinchappell/formBuilder by semantic-release-bot 4 years ago

Most upvoted comments

@AvKhushbu of course!

First I added the attributes to the type as below:

typeUserAttrs: {
  'radio-group': {
    randomize_values: {
      label: 'Randomize',
      type: 'checkbox'
    },
    always_correct: {
      label: 'Always correct',
      type: 'checkbox'
    },
  }
}

Then I created a function to check what the property was equal to and add the checked property accordingly

function fixCheckedProps(fld) {
    var randomizeField = $(fld).find('input.fld-randomize_values');

    // Also if the value is not set, because I wanted checked by default as well
    if ($(randomizeField).val() === 'on' || $(randomizeField).val() === ''){
      $(randomizeField).attr('checked', true);
    } else {
      $(randomizeField).attr('checked', false);
    }

    var alwaysCorrectField = $(fld).find('input.fld-always_correct');

    if ($(alwaysCorrectField).val() === 'on'){
      $(alwaysCorrectField).attr('checked', true);
    } else {
      $(alwaysCorrectField).attr('checked', false);
    }
  }

Then I added the function to the onAdd event

typeUserEvents: {
  'radio-group': {
    onadd: function (fld) {
      fixCheckedProps(fld);
    }
  },
}

Let me know if something isn’t clear or if I forgot something, and I can always elaborate a bit more!

joerou on Oct 11, 2017

@alexsergeibichy you can use the same pattern but need to add a value to the color picker config. https://codepen.io/kevinchappell/pen/gObEKEj

kevinchappell on Jan 25, 2020

@joerou thanks a lot, buddy! your example is very clear and it works perfectly fine in my code. Once again thank you so much!

AvKhushbu on Oct 12, 2017

I didn’t even know you could add a checkbox with typeUserAttr, so thank you, will help me on my project.

if you add a ‘checked’ prop with any value it looks like it will default as checked ie:

'select': {
          randomize: {
            label: 'Randomize',
            type: 'checkbox',
            checked: ''  /*<-----  here*/
          },
          feedback: {
            label: 'Feedback',
            type: 'text',
            placeholder: 'Insert feedback for this question here'
          }
        }

jjleavitt on Aug 4, 2017