如何防止双击提交表单？ Javascript

Question

每当我想上传图片并点击提交按钮两次时，图片显示两次，当我点击提交按钮 3 次时，它也显示三次。仅 javascript 的任何帮助将不胜感激。下面是我的代码：

const createForm = document.querySelector('#create-form');
createForm.addEventListener('submit', async e => {
    e.preventDefault();


    const ref = firebase.storage().ref();

    const images = createForm['upload-file'].files;
    const list = []


    for await(img of images){
        if (img !== 'length'){
        const name = new Date() + '-' + img.name
        const metadat = { contentType: img.type }
        const task = await ref.child(name).put(img, metadat)
            .then(snapshot => snapshot.ref.getDownloadURL());
            list.push(task)}
    }


    // adding to the Database
    await db.collection('properties').add({
        title: createForm['create-title'].value,
        city: createForm['add-city'].value,
        type: createForm['type-rent-sale'].value,
        rooms: createForm['add-rooms'].value,
        price: createForm['add-price'].value,
        image: list
    }).then(() => {
        //reset form
        createForm.reset();
    }).then( () => {
        //close modal
        const modal = document.querySelector('#modal-create');
        M.Modal.getInstance(modal).close();
    }).catch(err => {
        console.log(err.message);
    })
})

这是我的 HTML

<form id="create-form">

          <div class = "file-field input-field">
            <div class = "btn indigo">
               <span>Browse</span>
               <input type = "file" multiple id="upload-file" />
            </div>

            <div class = "file-path-wrapper">
               <input class = "file-path validate" type = "text"
                  placeholder = "Upload multiple files" />
            </div>
         </div>
          <button class="btn indigo z-depth-0">Create Post</button>
        </form>

Answer 1

类似的东西：

var clicker = 0; // init click check
const createForm = document.querySelector('#create-form');
createForm.addEventListener('submit', async e => {
e.preventDefault();
++clicker; // increase on every click
if (clicker == 1) { // if it first time

createForm.setAttribute('disabled', 'true'); // prevent another clicks.

const ref = firebase.storage().ref();

const images = createForm['upload-file'].files;
const list = []


for await(img of images){
    if (img !== 'length'){
    const name = new Date() + '-' + img.name
    const metadat = { contentType: img.type }
    const task = await ref.child(name).put(img, metadat)
        .then(snapshot => snapshot.ref.getDownloadURL());
        list.push(task)}
}


// adding to the Database
await db.collection('properties').add({
    title: createForm['create-title'].value,
    city: createForm['add-city'].value,
    type: createForm['type-rent-sale'].value,
    rooms: createForm['add-rooms'].value,
    price: createForm['add-price'].value,
    image: list
}).then(() => {
    //reset form
    createForm.reset();
    createForm.removeAttribute('disabled'); // make it clickable again
    clicker = 0;
}).then( () => {
    //close modal
    const modal = document.querySelector('#modal-create');
    M.Modal.getInstance(modal).close();
}).catch(err => {
    console.log(err.message);
})
}
else {return} // fallback
})

您可以在点击后使用变量来禁用按钮：

var clicker = 0;
const createForm = document.querySelector('#create-form');
createForm.addEventListener('submit', async e => {  
  e.preventDefault();
  ++clicker;
  if (clicker == 1) { this.setAttribute('disabled', 'true'); 
  // and execute rest of code 
  }
  else {return} // fallback since the button is already disabled

然后在一切按预期工作后，从按钮中删除禁用属性。

编辑澄清：代码执行后，您可以将 clicker 设置为 0 并通过 removeAttribute

删除禁用属性

Answer 2

在事件处理程序中，将属性 'disabled' 添加到按钮，这样在您完成文件处理之前它不会“可点击”。

如何防止双击提交表单？ Javascript

How to prevent double click on the submit form? Javascript

javascript

forms

submit