Невозможно повторно включить кнопку «Отправить» в Javascript после ее нажатия. .querySelector().disabled = false похоже не работает

Я пытаюсь создать простую панель поиска Google на своем веб-сайте. Это работает нормально. Однако я учитываю ошибку пользователя и по какой-то причине не могу снова включить кнопку отправки после ее нажатия при условии, что ввод не предоставлен. См. код Javascript ниже.

const text = document.querySelector("#search");
const msg = document.querySelector(".msg");

document.querySelector(".google-form").addEventListener('submit', onclick)

function onclick(e) {
  if (text.value === '' || text.value === null) {
    e.preventDefault();
    msg.classList.add('error');
    msg.innerHTML = 'Please enter a proper search query';
    setTimeout(() => msg.remove(), 3000);
    document.querySelector("#button").disabled = false; // <-- This method doesn't seem to work.
  }
}
<div class="google-form">
  <div class="msg"></div>
  <form id="my-form" action="https://www.google.com/search">
    <input id="search" type="text" name="q" placeholder="Enter Search">
    <button id="button" type="submit">Submit</button>
  </form>
</div>

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

Я попытался использовать .querySelector().disabled = false; , а также .removeAttribute(disabled), но ничего не работает. Что именно мне здесь не хватает, чтобы повторно активировать кнопку отправки после того, как она была нажата без ввода?


javascript html form-submit onsubmit
person Jordan Richardson    schedule 01.12.2020    source источник
comment
Почему вы добавляете обработчик событий submit в <div>? Кроме того, где вы отключаете кнопку отправки?   -  person Phil    schedule 02.12.2020
comment
Ах, я думаю, вы хотите msg.innerHTML = "" вместо msg.remove()   -  person Phil    schedule 02.12.2020

Ответы (2)


arrow_upward
0
arrow_downward

Ваша кнопка работает нормально. Вы просто удаляете весь элемент, а затем msg = document.querySelector(".msg"); ничего не находит. Кроме того, я бы оставил тайм-аут и оставил сообщение там, пока пользователь что-то не напишет.

Вы должны сделать это так:

const text = document.querySelector("#search");
const msg = document.querySelector(".msg");

document.querySelector(".google-form").addEventListener('submit', onclick)

function onclick(e) {
  msg.innerHTML= '';
  if (text.value === '' || text.value === null) {
    e.preventDefault();
    msg.classList.add('error');
    msg.innerHTML = 'Please enter a proper search query';
    document.querySelector("#button").disabled = false; // <-- This method doesn't seem to work.
  }
}
<div class="google-form">
  <div class="msg"></div>
  <form id="my-form" action="https://www.google.com/search">
    <input id="search" type="text" name="q" placeholder="Enter Search">
    <button id="button" type="submit">Submit</button>
  </form>
</div>

person Aristeidis Karavas    schedule 01.12.2020

arrow_upward
0
arrow_downward

Когда кнопка type установлена ​​на значение submit, она все равно отправит информацию на сервер. (нет, если вы используете метод preventDefault()!)
Мое предложение состоит в том, чтобы изменить кнопку type на button, а затем написать для нее событие onclick и проверить там проверку, если все было правильно, то вызовите событие отправки формы!
Таким образом можно предотвратить отправку неверной информации на сервер и избежать ошибок, которые она может вызвать.

person Arian Azizian    schedule 01.12.2020