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

Question

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

<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

防止删除按钮提交将 itr 类型更改为按钮而不是提交

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

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

html form two buttons only one to submit

html

javascript

forms

submit

vue.js