Блог

Главная - Вопросы по программированию - Правильная реализация отправки на JavaScript

Правильная реализация отправки на JavaScript

#javascript

#javascript

Вопрос:

Я очень новичок в JavaScript. Я пытаюсь иметь функциональность, с помощью которой я узнаю, когда пользователь выполняет поиск на таких сайтах, как google.com или duckduckgo.com . Есть четыре сценария, в которых это должно сработать-

  1. Когда пользователь нажимает enter в строке поиска.
  2. Когда пользователь нажимает на кнопку поиска.
  3. Когда пользователь нажимает enter на предложение автозаполнения поиска.
  4. Когда пользователь нажимает на предложение автозаполнения поиска.

У меня есть следующий код:

 document.body.addEventListener("submit", function(e) {
e.preventDefault();
console.log('About to submit')
e.target.submit()
}

Этот код частично работает на duckduckgo.com (Это работает в сценариях 1, 2 и 3. Но не работает в сценарии 4). Кроме того, этот код вообще не работает на google.com .

Я только начинаю с JavaScript. Я уверен, что мне чего-то не хватает. Кто-нибудь может мне помочь с этим?

ОБНОВЛЕНИЕ: возможно ли реализовать это без использования какого-либо идентификатора формы, поскольку я хотел бы, чтобы код работал и в сценариях с несколькими формами.

Ответ №1:

  1. Вам необходимо обработать форму отправить при вводе и нажать на отправить, используя событие отправки
  2. Для автозаполнения вам необходимо удалить обработчик автозаполнения из формы и добавить обработчик изменений

Утка

 const form = document.querySelector("form"); // first form on page

const submitting = (form,e) => {
  e.preventDefault();
  console.log('About to submit')
  form.submit()
};


form.addEventListener("change",e => submitting(form,e))
form.addEventListener("submit",e => submitting(form,e)) 
 <form id="search_form_homepage" class="search--home  js-search-form search--adv" name="x" method="GET" action="https://duckduckgo.com/">
  <input id="search_form_input_homepage" class="js-search-input search__input--adv" type="text" Xautocomplete="off" name="q" tabindex="1" value="" autocapitalize="off" autocorrect="off" placeholder="Search the web without being tracked">
  <input id="search_button_homepage" class="search__button  js-search-button" type="submit" tabindex="2" value="S">
  <input id="search_form_input_clear" class="search__clear  empty  js-search-clear" type="button" tabindex="3" value="X">
  <div id="search_elements_hidden" class="search__hidden  js-search-hidden"><input type="hidden" class="js-search-hidden-field" name="va" value="b"><input type="hidden" class="js-search-hidden-field" name="t" value="hc"></div>
  <div class="search__autocomplete" style="display: none;">
    <div class="acp-wrap js-acp-wrap"></div>
    <div class="acp-footer is-hidden js-acp-footer"><span class="acp-footer__instructions">Shortcuts to other sites to search off DuckDuckGo</span><span class="acp-footer__link"><a class="no-visited js-acp-footer-link" href="/bang">Learn More</a></span></div>
  </div>
</form>

Google

 const form = document.querySelector("form"); // first form on page

const submitting = (form, e) => {
  e.preventDefault();
  console.log('About to submit')
  form.submit()
};


form.addEventListener("change", e => submitting(form, e))
form.addEventListener("submit", e => submitting(form, e)) 
 <form action="https://google.com/search" method="GET" id="search_form">
  <input type="text" name="q" />
  <input type="submit" />
</form>

Более одной формы:

 const submitting = (form, e) => {
  e.preventDefault();
  console.log('About to submit')
  form.submit()
};


window.addEventListener("load", () => {
  document.body.addEventListener("submit", e => {
    submitting(e.target, e)
  });
  document.body.addEventListener("change", e => {
    submitting(e.target.closest("form"), e)
  })
}) 
 <form id="search_form_homepage" class="search--home  js-search-form search--adv" name="x" method="GET" action="https://duckduckgo.com/">
  <input id="search_form_input_homepage" class="js-search-input search__input--adv" type="text" Xautocomplete="off" name="q" tabindex="1" value="" autocapitalize="off" autocorrect="off" placeholder="Search the web without being tracked">
  <input id="search_button_homepage" class="search__button  js-search-button" type="submit" tabindex="2" value="S">
  <input id="search_form_input_clear" class="search__clear  empty  js-search-clear" type="button" tabindex="3" value="X">
  <div id="search_elements_hidden" class="search__hidden  js-search-hidden"><input type="hidden" class="js-search-hidden-field" name="va" value="b"><input type="hidden" class="js-search-hidden-field" name="t" value="hc"></div>
  <div class="search__autocomplete" style="display: none;">
    <div class="acp-wrap js-acp-wrap"></div>
    <div class="acp-footer is-hidden js-acp-footer"><span class="acp-footer__instructions">Shortcuts to other sites to search off DuckDuckGo</span><span class="acp-footer__link"><a class="no-visited js-acp-footer-link" href="/bang">Learn More</a></span></div>
  </div>
</form>


<form action="https://google.com/search" method="GET" id="search_form">
  <input type="text" name="q" />
  <input type="submit" />
</form>

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

1. Можно ли это сделать без использования HTML-файла?

2. Я не понимаю, что вы имеете в виду.

3. Вы можете использовать файл JavaScript, который отображает форму, но он также должен находиться в html-файле. Я добавил Google для вас

4. Возможно ли это без идентификатора формы? Я также хотел бы, чтобы код работал на веб-сайтах с несколькими формами.

5. Я изменил код, чтобы не использовать идентификатор, и добавил код, который может обрабатывать более одной формы

Метки: