为什么我表单中的每个字段都充当提交？

Question

出于某种原因，每当我测试此代码并尝试编辑字段时，它就像我点击“保存列表”按钮一样。我已经测试过注释掉 if 语句和文件上传以查看是否是这样，但它仍然发生了。

这是哈巴狗

        form.form.form-edit-listing
            .form__group
              label.form__label(for='name') Name
              input#name.form__input(type='text', value=`${product.name}`, required, name='name')
            .form__group.ma-bt-md
              label.form__label(for='price') Price
              input#price.form__input(type='number', value=`${product.price}`, required, name='price')
            .form__group.ma-bt-md
              label.form__label(for='description') Description
              input#description.form__input(type='text', value=`${product.description}`, required, name='description')
            if (product.currentAmount)
              .form__group.ma-bt-md
                label.form__label(for='startAmount') Amount
                input#startAmount.form__input(type='text', value=`${product.currentAmount}`, required, name='startAmount')
            if (product.willingToBreakAmount)
              .form__group.ma-bt-md
                label.form__label(for='willingToBreakAmount') Are you willing to break up the set?
                input#willingToBreakAmount.form__input(type='text', value=`${product.willingToBreakAmount}`, required, name='willingToBreakAmount')
            if (product.totalStartAmount)
              .form__group.ma-bt-md
                label.form__label(for='girlStartAmount') Amount of girl costumes
                input#girlStartAmount.form__input(type='number', value=`${product.girlStartAmount}`, required, name='GirlAmount')
              .form__group.ma-bt-md
                label.form__label(for='boyStartAmount') Amount of boy costumes
                input#boyStartAmount.form__input(type='number', value=`${product.boyStartAmount}`, required, name='startboyStartAmount')
            .form__group.form__photo-upload
              img.form__user-photo(src=`/img/users/${user.imageCover}`, alt='product cover image')
              input.form__upload(type='file', accept='image/*', id='imageCover', name='imageCover')
              label(for='imageCover') Choose new cover photo*/
            
            .form__group
              input.btn.btn--small.btn--green(type='submit' value='Save Listing')

这是提交表单时调用的函数

if (editListingForm) {
  editListingForm.addEventListener('click', e => {
    e.preventDefault();
    const form = new FormData();
    ...

    const model = getModel(window.location.toString());
    const id = getId(window.location.toString());
    editListing(form, id, model);
  });
}

这是它更新列表的地方

export const editListing = async (data, id, model) => {
  try {
    await axios({
      method: 'PATCH',
      url: `/api/v1/${model}/${id}`,
      data
    });
    window.setTimeout(() => {
      location.assign('/my-listings');
    }, 150);
  } catch (err) {
    showAlert('error', err.response.data.message);
  }
};

Answer 1

您正在将点击侦听器添加到表单，而不是按钮。

为什么我表单中的每个字段都充当提交？

Why does every field in my form act as a submit?

javascript

forms

pug