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

Question

For some reason whenever I test this code and try to edit a field, it acts like I hit the "save listing" button. I've tested commenting out the if statements and file upload to see if it was that, but it still happened.

This is the pug

        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')

This is the function that's called when the form is submitted

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);
  });
}

This is where it updates the listing

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

You're adding the click listener to the form, not the button.