How to prevent double click on the submit form? Javascript

Question

Whenever i want to upload an image and click on the submit button twice, the image is showing twice, and when i click on the submit button 3 times it shows three times also. Any help with just javascript would be appreciated guys. Below is my code:

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

here is my 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

Something like that:

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

---

You can use variable to disable the button after the click:

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

And then after everything work as expected remove the disable attribute from the button.

Edit for clarification: After the code execute you can set clicker to 0 and remove the disabled attribute via removeAttribute

Answer 2

Inside the event handler, add the attribute 'disabled' to the button so it wont be "clickable" until you finish handling the files.