Prevent variable change on form submit

[yingban]

Support Request

Hi @bencroker,

I am building an addresses book for a craft commerce website.
I am using the same form include with as variable, the id of the address to edit.

My issue is that after submitting the form, the variable is reset.
How could I prevent that? I have tried with the hidden input field, but the result is not that nice.

Plugin Version

3.5.0

[bencroker]

I’m not sure I’m following. Can you show me an example of what you mean?

[yingban]

Sorry for the non clear explanation

I have the following

{% set addressToEditId = addressToEditId ?? '' %}
{% if currentUser.addresses|length %}
  {{ include('_shop/_private/address/list', {
    addresses: currentUser.addresses,
    primaryBillingAddressId: currentUser.primaryBillingAddressId,
    primaryShippingAddressId: currentUser.primaryShippingAddressId,
  }) }}
{% else %}
  <p>{{ 'You don’t have any addresses yet.'|t }}</p>
{% endif %}

 {{ include('_shop/_private/address/address-form.twig', {
   address: null
 }) }}

and in the list.twig, I have a for loop:

{% for address in addresses %}
  {% set isFormShow = 'false' %}
      {% tag 'div' with {
        class: [
          'customer-block',
          addressToEditId == address.id ? 'visually-hidden'
        ],
        id: "customer-block-address#{address.id}"
      } %}
        <p class="small" translate="no">
          {{ address.title }}<br>
          {{ "#{address.firstname} #{address.lastname}" }}
        </p>

        {{ address | address | attr({class: 'small'}) }}
        {% if primaryBillingAddressId == address.id or primaryShippingAddressId == address.id %}
          <ul class="check-list">
            {% if primaryBillingAddressId == address.id %}
              <li>{{ 'Primary billing address'|t }}</li>
            {% endif %}
            {% if primaryShippingAddressId == address.id %}
              <li>{{ 'Primary shipping address'|t }}</li>
            {% endif %}
          </ul>
        {% endif %}

        <div class="customer-block__actions">
          {{ tag('button', {
            class: ['action', 'action-customer', 'action-edit-address'],
            type: 'button',
            data: {
              anchor: "address#{address.id}",
              sprig: true,
              's-vals': {addressToEditId: address.id}|json_encode
            },
            html: m_icon.params('edit') ~ tag('span', {class: 'visually-hidden', text: 'Edit the address' | t})
          }) }}

      
        </div>
      {% endtag %}

      {{ include('_shop/_private/address/address-form.twig', {
        address: address
      }) }}
    {% endfor %}

When I click on the edit button of one block, I set the addressToEditId variable with the value of the address' id.
It displays the form with the correct data.
But once I submit the form, the addressToEditId variable is reset.

[bencroker]

You can use a hidden input field or s-val to maintain the variable state in your form.

{{ hiddenInput('addressToEditId', addressToEditId) }}

OR

<form sprig s-val:address-to-edit-id="{{ addressToEditId }}">

[yingban]

Thanks Ben!
I managed with not nice UX by extracting the flash messages from the form.

I am also using the same form to create new addresses, where the address id is null.
I am not sure that it is possible to maintain the state in this case.

[bencroker]

It should be possible to maintain state, I can’t see why it wouldn’t be.

[yingban]

@bencroker
I found what was missing, the instantiation of each input variables like

{% set lastname = lastname ?? '' %}

like there https://putyourlightson.com/sprig/cookbook#contact-form

I was wondering how to handle "fields[firstname]" for special addresses' fields, but it should be doable with hiddenInput, like

 {{ hiddenInput('fields[firstname]', firstname) }}