Javascript添加点击事件以输入提交字段
[英]Javascript add on click event to input submit field
问题描述
I am trying to add a javascript click event to an input field as shown below.
我正在尝试向输入字段添加一个 javascript 单击事件，如下所示。 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.我无法向输入字段添加 id，因此我必须按类掌握元素。
<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.我的目标是使用给定的输入将用户发送到不同的 url。 The problem is one can mouse click or can click enter to perform the submit action.问题是可以鼠标单击或单击回车来执行提交操作。
4 个解决方案
解决方案1
1 2021-07-24 19:07:08
document.getElementsByClassName("search-submit") returns an array of elements and not a single element . document.getElementsByClassName("search-submit")返回元素数组而不是单个元素。 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>
解决方案2
0 2021-07-24 19:03:54
getElements ByClassName returns a list. getElements ByClassName 返回一个列表。 If you are sure your list is non empty, select the first one:如果您确定您的列表非空，请选择第一个：
document.getElementsByClassName("search-submit")[0].
解决方案3
0 已采纳 2021-07-24 19:04:04
Why instead of use button click don't use submit event on form like:为什么不使用按钮click而不使用表单上的submit event ，例如：
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>
解决方案4
0 2021-07-24 19:49:45
As others have pointed out you are not making a reference to the index of the HTML collection you have queried using getElementsByClassName.正如其他人指出的那样，您没有引用您使用 getElementsByClassName 查询的 HTML 集合的索引。 This returns a collection of HTML elements.这将返回 HTML 元素的集合。 I personally prefer using querySelectorAll('.classname'), this returns an array like nodeList which can be iterated over using forEach.我个人更喜欢使用 querySelectorAll('.classname')，这会返回一个像 nodeList 这样的数组，可以使用 forEach 对其进行迭代。
You iterate over the nodeList and use a unique class selector to identify the button being pressed.您遍历 nodeList 并使用唯一的类选择器来标识被按下的按钮。 In your case we can use its class .search-submit , though you could use an parent selector as well.在您的情况下，我们可以使用它的类.search-submit ，尽管您也可以使用父选择器。 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.