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

Question

我有一个带有两个按钮的表单。 保存更改按钮是提交按钮，但删除按钮一旦单击就不应提交。 删除按钮应该打开一个模态，并且在模态中还有两个按钮，一个是 go 返回（关闭模态），一个是完成删除。 我的问题是，一旦单击删除按钮，表单就会认为我想提交而我不想提交。 我怎么能解决这个问题？ 谢谢

<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

您需要将type="submit"添加到提交按钮，并将type="button"添加到删除按钮。

默认情况下，如果没有明确的提交按钮，表单内的按钮将触发提交

Answer 2

为了防止删除按钮提交，将其类型更改为提交的按钮

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