html 表单两个按钮只一个提交

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>

Answer 1

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

Answer 2

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

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