Разрешить однократное нажатие кнопки

Question

У меня есть такая кнопка:

<fieldset>
     <input type="text" placeholder="Color" name="Color" required>
</fieldset>

<fieldset>
     <input type="text" placeholder="Bird" name="Bird" required>
</fieldset>

<fieldset>
     <button name="submit" type="submit" id="submit">Lagre</button>
</fieldset>

Форма будет отправлена, только если текстовые поля имеют значение. Но если пользователь спамит кнопку «отправить» и нажмет ее 5 раз, форма будет отправлена ​​5 раз. Как отключить кнопку после первого нажатия? Я знаю про document.getElementById("submit").disabled = true;, но если пользователь забудет ввести значение в «Bird» и нажать кнопку, пользователь не сможет нажать ее снова. Есть советы?

Answer 1

В вашей функции отправки проверьте, заполнены ли поля ввода. Если нет, то покажите предупреждение. Как только это условие выполнено, вы можете отключить кнопку.

JSFiddle: https://jsfiddle.net/guv12f83/

function submitForm() {
  const color = document.getElementById('colorInput').value.trim();
  const bird = document.getElementById('birdInput').value.trim();
  if (color.length > 0 && bird.length > 0) {
    document.getElementById('submit').disabled = true
    console.log('Enter your code here')
  } else {
    alert('Please fill all fields')
  }
}

Answer 2

это очистит форму, если пользователь отправил действительный ввод. в противном случае они смогут щелкнуть, но событие будет предотвращено. поэтому он не отправит форму, пока она не станет действительной. Вы можете отправить сообщение, если хотите.

var btn = document.getElementById('submit')
var colorInput = document.querySelector('input[name=Color]')
var birdInput = document.querySelector('input[name=Bird]')


btn.addEventListener("click", function (e) {
    if(colorInput.value.trim().length === 0 && birdInput.value.trim().length === 0){
        e.preventDefault()
        return
    } else {

        btn.disabled = true;
        colorInput.value = ""
        birdInput.value = ""
        btn.disabled = false;
    }
});

<fieldset>
    <input type="text" placeholder="Color" name="Color" required>
</fieldset>

<fieldset>
    <input type="text" placeholder="Bird" name="Bird" required>
</fieldset>

<fieldset>
    <button name="submit" type="submit" id="submit">Lagre</button>
</fieldset>