Use hiddenInput() helper function

[AugustMiller]

Noticed this while helping someone in Discord.

Issuing as a Draft, because I think it's worth revisiting the involvement of Javascript… I don't think it's necessary in most situations, because of native HTML form behavior?

For instance, this pair of patches preserves the functionality (as best I can tell):

• Remove this script block:

  {% if showPrimaryCheckboxes %}
      document.querySelectorAll('input[type=checkbox][data-primary-input]').forEach(el => {
          el.addEventListener('change', ev => {
              let primaryInput = document.querySelector(`input[name="${ev.target.dataset.primaryInput}"]`);
              if (ev.target.checked) {
                  primaryInput.value = 1;
              } else {
                  primaryInput.value = 0;
              }
          });
      });
  {% endif %}

• Modify inputs:

  <div class="my-2">
    {{ hiddenInput('isPrimaryBilling', 0) }}
    <label>{{ input('checkbox', 'isPrimaryBilling', 1, { checked: address.isPrimaryBilling }) }} {{ 'Use as the primary billing address'|t('commerce') }}</label>
  </div>
  <div class="my-2">
    {{ hiddenInput('isPrimaryShipping', 0) }}
    <label>{{ input('checkbox', 'isPrimaryShipping', 1, { checked: address.isPrimaryShipping }) }} {{ 'Use as the primary shipping address'|t('commerce') }}</label>
  </div>

The 0 is sent unless the second box is checked. Only the second box’s state is important, and it doesn't need to be synchronized with a “virtual” input.

[AugustMiller]

Either way—I will update the documentation with examples of how to set these Commerece-specific attributes!

[nfourtythree]

This was fixed in: 5e22622

[nfourtythree]

And to clarify, and unchecked checkbox doesn't submit any data when the form is posted.

In the example of this functionality, you may want to stop and address being the primary billing address and therefore uncheck it. We need the falsey value to be posted so we can make the appropriate updates in the system.