html form two buttons only one to submit

Question

I have a form with two buttons. The save changes button is the submit button but the delete button should not submit once clicked. The delete button should open a modal and in the modal there are two more buttons, one to go back(close modal) and one to finalize the delete. My issue is that as soon as the delete button is clicked on, the form thinks I want to submit which I don't. How could I get around this? Thank you

<form>
          <div class="mailing-address">
            <p>Mailing Address</p>
            <div class="form3">
              <span class="edit-mailing1">
                <span>
                  <input type="text" required placeholder="Name" v-model="editFormData.name" />
                  <input type="text" required placeholder="Email" v-model="editFormData.email" />
                </span>
                <input type="text" required placeholder="Address Line 1" v-model="editFormData.address1" />
                <input type="text" placeholder="Address Line 2" v-model="editFormData.address2" />
              </span>
              <span class="edit-mailing2">
                <input type="text" required placeholder="Phone Number" v-model="editFormData.phone" />
                <input type="text" required placeholder="City" v-model="editFormData.city" />
                <span>
                  <SelectBox v-model="editFormData.state" />
                  <input type="text" required placeholder="Zip" v-model="editFormData.zip" />
                </span>
              </span>
            </div>
          </div>
          <div class="edit-section-footer">
            <CheckboxSlider v-model="editFormData.vip" :userId="editFormData.id" :reloadTable="reloadTable" />
            <span>
              <button class="button red" @click="isModalOpen = true">Delete User</button>
              <button class="button">Save Changes</button>
            </span>
          </div>
        </form>

You need to share the code. I reckon you've probably got a `type="submit"` where it shouldn't be — dbramwell, Jul 30 '20 at 09:59
@dbramwell I think all buttons that don’t have type=“button” submit a form as well — evolutionxbox, Jul 30 '20 at 09:59
I dont see any `
` tag. Does this get transpiled via the classes or is this not a *real* html form? — MauriceNino, Jul 30 '20 at 10:03
Does this answer your question? [How to prevent buttons from submitting forms](https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) — nvidot, Jul 30 '20 at 10:05

nip · Accepted Answer · 2020-07-30T10:03:00.287

2

You need to add type="submit" to the submit button, and add type="button" to the delete button.

By default, a button inside a form will trigger a submit if there isn't a explicit submit button

edited Jul 30 '20 at 10:03

answered Jul 30 '20 at 10:00

nip

1,609
10
20

Delete User This still doesn't change it – albert_anthony6 Jul 30 '20 at 10:02
I'll add type="button" – albert_anthony6 Jul 30 '20 at 10:03
1

@albert_anthony6 Try this – nip Jul 30 '20 at 10:03
You're correct, just tried it and it worked! Thanks :) I'll mark this as answer when it allows in about 8 mins – albert_anthony6 Jul 30 '20 at 10:05

score 1 · Answer 2 · answered Jul 30 '20 at 10:03

1

to prevent delete button from submit change it type to button insted of submit

<button onclick="somefunction()" type="button">Button</button>

answered Jul 30 '20 at 10:03

Nayef Hamad

11
2

html form two buttons only one to submit

2 Answers2