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>