2nd form on the page not submitting as turbo_stream

rubyonrails-talk
1

Hi, I have 2 forms on an basic user account page. 1st form updates contact info via profile_controller, 2nd one update password change via password_change_controller. Both are very similar but 1st one submits as turbo_stream but 2nd one does not. It submits as html, even if I force to use turbo_stream: true.


<turbo-frame id="account-profile">
  <div class="card border shadow-sm bg-light">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="h4 mb-0">Update Contact Information</h2>
      </div>
      
      <div id="error-div"></div>
      
      <%= form_with model: @user, url: account_profile_path(ref: 'profile'),
                                  class: 'needs-validation', 
                                  html: { id: 'profile-form' } do |f| %>
        <div class="row mb-4">
          <div class="col-12">
            <div class="form-floating mb-3">
              <%= f.text_field :first_name, class: 'form-control', placeholder: 'First Name', required: true %>
              <%= f.label :first_name, 'First Name*' %>
            </div>
          </div>
          
          <div class="col-12">
            <div class="form-floating mb-3">
              <%= f.text_field :last_name, class: 'form-control', placeholder: 'Last Name', required: true %>
              <%= f.label :last_name, 'Last Name*' %>
            </div>
          </div>
          
          <div class="col-12">
            <div class="form-floating mb-3">
              <%= f.email_field :email, class: 'form-control', placeholder: 'Email Address', required: true %>
              <%= f.label :email, 'Email Address*' %>
            </div>
          </div>
          
          <div class="col-12">
            <div class="form-floating">
              <%= f.telephone_field :phone, class: 'form-control', placeholder: 'Phone Number' %>
              <%= f.label :phone, 'Phone Number' %>
            </div>
          </div>
        </div>

        <div class="d-flex gap-2">
          <%= f.submit 'Save Changes', class: 'btn btn-sm btn-secondary w-100' %>
          <%= link_to 'Cancel', account_profile_path(ref: 'profile'), class: 'btn btn-sm btn-outline-secondary', data: { turbo: true, turbo_frame: 'account-profile' } %>
        </div>
      <% end %>
        
        <hr class="my-4">
        
        <h3 class="h5 mb-3">Update Account Password</h3> 
        
        <%= form_with model: @user, url: account_change_password_path,
                      html: { id: 'frm-account-password-change' }, 
                      data: { 
                        turbo_stream: true, 
                        controller: 'validators--password-change' 
                      } do |f| %>
        <div class="row mb-3">
          <div class="col-12">
            <div class="form-floating mb-3">
              <%= f.password_field :password, class: 'form-control', placeholder: 'Current Password' %>
              <%= f.label :password, 'Current Password' %>
            </div>
          </div>
          
          <div class="col-12">
            <div class="form-floating mb-3">
              <%= f.password_field :pw_new, class: 'form-control', placeholder: 'New Password' %>
              <%= f.label :pw_new, 'New Password' %>
              <div class="form-text small text-muted">Must be at least 6 characters long</div>
            </div>
          </div>
          
          <div class="col-12">
            <div class="form-floating">
              <%= f.password_field :pw_new_confirm, class: 'form-control', placeholder: 'Confirm New Password' %>
              <%= f.label :pw_new_confirm, 'Confirm New Password' %>
            </div>
          </div>
        </div>
        
        <div class="d-flex gap-2">
          <%= f.submit 'Save Changes', class: 'btn btn-sm btn-secondary w-100' %>
          <%= link_to 'Cancel', account_profile_path(ref: 'profile'), class: 'btn btn-sm btn-outline-secondary', data: { turbo: true, turbo_frame: 'account-profile' } %>
        </div>
      <% end %>
    </div>
  </div>
</turbo-frame>

have been scratching my head on this, any help would be appreciated.

2

Fixed: My validation js was hijacking the form submission process!

// Before (bypassing Turbo)
.on('core.form.valid', function (e) {
  form.submit();
})

// After (working with Turbo)
.on('core.form.valid', function (e) {
  // Triggers the standard submit event, which can be intercepted by Turbo
  // This allows Turbo to handle the submission with turbo_stream format
  const submitEvent = new Event('submit', { bubbles: true, cancelable: true });
  form.dispatchEvent(submitEvent);
})