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

Question

[每当我要上传图像并单击两次提交按钮时，该图像就会显示两次，而当我单击提交按钮3次时，它也会显示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

在事件处理程序内部，将属性'disabled'添加到按钮，以便在您完成处理文件之前该按钮不会被“ clickable”。

Answer 2

类似的东西：

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

然后一切都按预期方式工作后，从按钮中删除disable属性。

编辑说明：代码执行后，您可以将答题器设置为0并通过removeAttribute删除禁用的属性