Form fill data don't work with checkboxes

Questions
1

So i have this form with two checkboxes

<div class="list no-hairlines-md">
  <form id="settings-form" action="javascript:void(0);">
    <ul>
     
      <li>
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title fx-item-title">Checkbox #1</div>
            <div class="item-after">
              <label class="toggle toggle-init">
                <input type="checkbox" name="automatic-folders" id="automatic-folders">
                <span class="toggle-icon"></span>
              </label>
            </div>
          </div>
        </div>
      </li>

      <li>
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title fx-item-title">Checkbox #2</div>
            <div class="item-after">
              <label class="toggle toggle-init">
                <input type="checkbox" name="automatic-delete" id="automatic-delete">
                <span class="toggle-icon"></span>
              </label>
            </div>
          </div>
        </div>
      </li>

      <li>
        <div class="item-content">
          <div class="item-inner">
            <button class="col button button-fill" id="settings-btn">Save</button>
          </div>
        </div>
      </li>
    </ul>
  </form>
</div>

I want to use fill form function and set the first checkbox to ‘ON’ and second to ‘OFF’

 var settingsFormData = {
   'automatic-folders': ['no'],
   'automatic-delete': ['yes'],
 };
 app.form.fillFromData('#settings-form', settingsFormData);

It works fine with inputs type text but not with checkboxes. Any thoughts?

Docs: https://framework7.io/docs/form.html#form-data-example

2

if you just want to set initial default (toggle on or off), you can simply do it with HTML:

Checkbox type has boolean values 0 or 1. The assigned value of a checkbox is whatever you want to return/submit when it’s toggled on. Thus I think your automatic-folders: ‘no’ is like setting vehicle1: “bike” in my link above. I think what you really want is to set automatic-delete.checked = 1 to toggle on.

1 Like