0

I am trying to add a javascript click event to an input field as shown below. Have tried multiple things such as:

document.getElementsByClassName("search-submit").addEventListener("click", function () { do something})

I am not able to add an id to the input field, so I will have to grasp the element by class.

<div class="nv-nav-search" aria-label="search">
  <div class="form-wrap ">
    <form role="search" method="get" class="search-form" action="https://www.k.nl/"><label><span class="screen-reader-text">Zoek naar...</span><input type="search" class="search-field" placeholder="Zoek naar..." value="" name="s"></label><input type="submit" class="search-submit" value="Search">
      <div class="nv-search-icon-wrap">
        <div class="nv-icon nv-search">
          <svg width="15" height="15" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z"></path></svg>
        </div>
      </div>
    </form>
  </div>
</div>

My aim is to send the user to a different url with the input which is given. The problem is one can mouse click or can click enter to perform the submit action.

Improve this question
1
  • Did you try the mdn doc, this should be simple ! Commented Jul 24, 2021 at 19:08

4 Answers 4

Reset to default
1

document.getElementsByClassName("search-submit") returns an array of elements and not a single element. You need to structure your code as shown below to get it working.

document.getElementsByClassName("search-submit")[0].addEventListener("click", function(e) {
  e.preventDefault();
  alert('clicked me!');
})
<div class="nv-nav-search" aria-label="search">
  <div class="form-wrap ">
    <form role="search" method="get" class="search-form" action="https://www.k.nl/"><label><span class="screen-reader-text">Zoek naar...</span><input type="search" class="search-field" placeholder="Zoek naar..." value="" name="s"></label><input type="submit" class="search-submit" value="Search">
      <div class="nv-search-icon-wrap">
        <div class="nv-icon nv-search">
          <svg width="15" height="15" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z"></path></svg>
        </div>
      </div>
    </form>
  </div>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Why instead of use button click don't use submit event on form like:

document.querySelector(".search-form").addEventListener("submit", (e) => {
  e.preventDefault();
  console.log(document.querySelector('.search-field').value);
});
<div class="nv-nav-search" aria-label="search">
  <div class="form-wrap ">
    <form role="search" method="get" class="search-form" action="https://www.k.nl/"><label><span class="screen-reader-text">Zoek naar...</span><input type="search" class="search-field" placeholder="Zoek naar..." value="" name="s"></label><input type="submit" class="search-submit" value="Search">
      <div class="nv-search-icon-wrap">
        <div class="nv-icon nv-search">
          <svg width="15" height="15" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z"></path></svg>
        </div>
      </div>
    </form>
  </div>
</div>

Improve this answer

6 Comments

Wow great this does the trick! Thanks for your help!
You are welcome, acept this as answer for the community :)
Do have one more questions. My script is not working on mobile: document.querySelector(".search-form").addEventListener("submit", redirect); alert("mobile1"); function redirect(e) { alert("mobile2"); e.preventDefault(); var searchvalue = document.querySelector('.search-field').value; window.location.href = "/?s=" + searchvalue + "&post_type=product"; } alert 2 is not working @SimoneRossaini
It has something to do with ES6 not being supported, but not sure how to convert it to ES5. Have tried "use strict";
i tested your code work as expect.. have you a live preview?
|
0

getElementsByClassName returns a list. If you are sure your list is non empty, select the first one:

document.getElementsByClassName("search-submit")[0].

Improve this answer

Comments

0

As others have pointed out you are not making a reference to the index of the HTML collection you have queried using getElementsByClassName. This returns a collection of HTML elements. I personally prefer using querySelectorAll('.classname'), this returns an array like nodeList which can be iterated over using forEach.

You iterate over the nodeList and use a unique class selector to identify the button being pressed. In your case we can use its class .search-submit, though you could use an parent selector as well. This will work regardless of clicking the event or pressing the enter button. This will make the whole thing a bit more dynamic by not having to reference the index of the selectors node as you may have multiple buttons in your form with the same class selector.

Further explanation found in code below.

// make a constant and assign a nodeList using querySelectorAll()
const searchesBtn = document.querySelectorAll(".search-submit")

// the event callback function passing in the event.target
function searchEvent(e) {
  // do something with the event
  console.log('your search input event has fired')
}

// take the nodeList and iterate over the nodes 
// check the elements classList and make sure it contains 
// the 'unique-class' class
searchesBtn.forEach(search => {
  if (search.classList.contains('unique-class')) {
    // the event is the search button run the function on click
    search.addEventListener('click', searchEvent)
  }
})
<div class="nv-nav-search" aria-label="search">
  <div class="form-wrap ">
    <form role="search" method="get" class="search-form" action="https://www.k.nl/">
      <label>
        <span class="screen-reader-text">Zoek naar...</span>
        <input type="search" class="search-field" placeholder="Zoek naar..." value="" name="s">
      </label>
      <input type="submit" class="search-submit unique-class" value="Search">
      <div class="nv-search-icon-wrap">
        <div class="nv-icon nv-search">
          <svg width="15" height="15" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
          <path d="M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z"></path>
          </svg>
        </div>
      </div>
    </form>
  </div>
</div>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.