javascript - 如何使用 javascript 和 html 创建搜索栏

Question

我正在尝试使用 HTML 和 JavaScript 创建搜索栏，但我不明白为什么我的代码不起作用。

document.querySelector("#search-form").onsubmit = function() {
  // Grab whatever the user typed in
  console.log("It worked");
  let searchTermInput = document.querySelector("#search-id").value.trim();
  let end = "https://api.themoviedb.org/3/search/movie?api_key=473716561aeaecdcec4a3a598dae6440&language=en-US&query=" + searchTermInput + "&page=1&include_adult=false";
  ajax(end);
}

<form action="" method="" class="col-12" id="search-form">
  <div class="form-row">
    <div class="col-12 mt-4 col-sm-6 col-lg-4">
      <label for="search-id" class="sr-only">Search:</label>
      <input type="text" name="" class="form-control" id="search-id" placeholder="Search...">
    </div>
    <div class="col-12 mt-4 col-sm-auto">
      <button type="submit" class="btn btn-primary btn-block">Search</button>
    </div>
  </div>
  <!-- .form-row -->
</form>

Answer 1

提交按钮正在执行其默认功能，即提交表单。使用 preventDefault 停止提交，它将起作用。一切完成后提交表单

document.querySelector("#search-form").onsubmit = function(e) {
e.preventDefault();
  // Grab whatever the user typed in
  console.log("It worked");
  let searchTermInput = document.querySelector("#search-id").value.trim();
  let end = "https://api.themoviedb.org/3/search/movie?api_key=473716561aeaecdcec4a3a598dae6440&language=en-US&query=" + searchTermInput + "&page=1&include_adult=false";
  ajax(end);
}

<form action="" method="" class="col-12" id="search-form">
  <div class="form-row">
    <div class="col-12 mt-4 col-sm-6 col-lg-4">
      <label for="search-id" class="sr-only">Search:</label>
      <input type="text" name="" class="form-control" id="search-id" placeholder="Search...">
    </div>
    <div class="col-12 mt-4 col-sm-auto">
      <button type="submit" class="btn btn-primary btn-block">Search</button>
    </div>
  </div>
  <!-- .form-row -->
</form>