CODEWITHSUNDEEP
javascripthtml
john smith
john smith

Reputation: 15

How to create a search bar using javascript and html

I'm trying to create a search bar using HTML and JavaScript, but I'm not understanding why my code isn't working.

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>

Upvotes: 0

Views: 771

Answers (1)

ellipsis
ellipsis

Reputation: 12152

The submit button is performing its default function which is submitting the form. Stop the submitting using preventDefault and it will work. After everything is done submit the form

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>

Upvotes: 1

Related Questions