Rendering form in slim unexpectedly submits data

Question

I'm trying to render multiple forms in users/new.html.slim. I'm having trouble with my "next" button in the form1, which automatically submits the form to db when I click it. But, it supposed to just render next form.

= simple_form_for @user, html: { class: "profile_form"} do |f|
  = f.fields_for :profile, @user.profile || Profile.new do |p|
    = render 'users/form1', f: f, p: p
  = f.submit

and this is form1

.form-1
  .form-1-detail
    = f.input :name
    = f.input :email
    = f.input :password, required: true
    = f.input :password_confirmation, required: true
button.next next

Does anyone know why it's happening? I'm suspecting the indentation is causing it to act weirdly.

Answer 1

Your problem is with the default type of a button, which is "submit", so any button inside a form will trigger a form submission, unless you specifically change the button type.

You can do so by explicitly adding type="button":

.form-1
  .form-1-detail
    = f.input :name
    = f.input :email
    = f.input :password, required: true
    = f.input :password_confirmation, required: true
button.next type="button" next