Блог

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

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

#javascript #html #form-submit #onsubmit

#javascript #HTML #форма-отправить #onsubmit

Вопрос:

Я пытаюсь создать простую панель поиска 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(«отключено»), но ничего не работает. Чего именно мне здесь не хватает, чтобы повторно активировать кнопку отправки после нажатия на нее без ввода?

Комментарии:

1. Почему вы добавляете обработчик submit событий в a <div> ? Кроме того, где вы отключаете кнопку отправки?

2. Ах, я думаю, вы хотите msg.innerHTML = "" вместо msg.remove()

Ответ №1:

Ваша кнопка работает просто отлично. Вы просто удаляете полный элемент, а затем 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>

Ответ №2:

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

Метки: , ,