Как предотвратить двойной щелчок по форме отправки? Javascript - PullRequest
Новая
       23

Как предотвратить двойной щелчок по форме отправки? Javascript

0 голосов
/ 27 апреля 2020

Всякий раз, когда я хочу загрузить изображение и дважды нажать кнопку отправки, изображение отображается дважды, а когда я нажимаю кнопку отправки 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>

Ответы [ 2 ]

0 голосов
/ 27 апреля 2020

Внутри обработчика событий добавьте атрибут «отключен» к кнопке, чтобы он не был «кликабельным», пока вы не закончите sh обработку файлов.

0 голосов
/ 27 апреля 2020

Примерно так: 

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

А затем, после того, как все работает, как ожидалось, снимите отключение атрибут из кнопки.

Редактировать для пояснения: после выполнения кода вы можете установить кликер на 0 и удалить отключенный атрибут с помощью removeAttribute

...