Отправка формы в Javascript с помощью EventListener не вызовет запрос на получение - PullRequest
Новая
       20

Отправка формы в Javascript с помощью EventListener не вызовет запрос на получение

0 голосов
/ 31 марта 2020

У меня есть форма поиска, из которой я хочу отправить вызов API. Я знаю, что моя функция работает, потому что при отправке журналы моей консоли срабатывают. Кроме того, в консоли, если я вызываю function search("mytermhere"), я получаю ответ от API, но запуск функции поиска из события формы не будет работать. Пожалуйста, помогите!

HTML: 

       <!DOCTYPE html>
<html lang="en">




<head>

    <link href="https://fonts.googleapis.com/css?family=Liu+Jian+Mao+Cao|Raleway&display=swap" rel="stylesheet">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/solid.min.js">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Document</title>
</head>

<body>
    <div class="background">
        <div class="overlay">
            <h1 class="title">
                Visual Vibes
            </h1>
            <h2>search images</h2>
            <form class="search-form" type="submit">
                <input label="search" class="input" type="text" placeholder="&#xf002" value="">
            </form>
        </div>
    </div>
    <script src=" script.js "></script>
</body>

</html>

JS: 

const input = document.querySelector(".input");
let searchTerm = input.value;
const form = document.querySelector(".search-form");

function search(searchTerm) { //does not run when called by event listener
  let url = `${URL}&query=${searchTerm}`;
  return fetch(url)
    .then(response => response.json())
    .then(result => {
      return result.results;
      console.log(results.results);
    });
}

input.addEventListener("focus", function(e) {
  e.preventDefault();
  console.log(input);
  input.style = "font-family: 'Raleway', sans-serif";
  input.placeholder = "";
});
input.addEventListener("blur", function(e) {
  e.preventDefault();
  console.log(input);
  input.style = "font-family: FontAwesome";
  input.value = "";
  input.placeholder = "\uf002";
});
form.addEventListener(
  "submit",
  function(e) {
    let searchTerm = input.value;
    console.log(searchTerm); //outputs value in input in console
    e.preventDefault();
    console.log("hi"); //outputs in console when form submitted
    search(searchTerm); //this function does not run
  },
  false
);

РЕДАКТИРОВАТЬ: обновлено, чтобы включить полный код

1 Ответ

0 голосов
/ 31 марта 2020

Ваша проблема в форме HTML код.

Тег формы не имеет атрибута "type". Если вы хотели добавить кнопку для отправки формы, сделайте это следующим образом: 

<input type="submit" value="Submit" />

Кроме того, насколько мне известно, ваша переменная "searchTerm" недопустима. Там нет "input.value". Вам нужно добавить либо атрибут «name» к обоим, либо атрибут «id» во входное текстовое поле, чтобы извлечь поисковый запрос.

Получение поискового запроса с идентификатором: 

document.getElementById("id").value;

Получение поискового запроса с именем: 

document.nameOfForm.nameOfTextbox.value;

Если вы хотите сделать форму отправляемой «без кнопки», установите позицию «абсолютная» и скройте ее где-нибудь, например: 

<input type="submit" style="position: absolute; left: -9999px"/>
...