Trigger a button with both Click and Enter key for fetching Javascript

Question

I've been looking for different solutions on the site, but none seem to work for me. I need to trigger a submit button with Enter keypress event and mouse click, in order to fetch data from a weather api.

<div class="inputdiv">
    <input type="text" placeholder="Enter City, Country" id="cityinput">
    <input type="submit" value="Submit" id="add" onclick="">
</div>
<script src="./script.js"></script>

Here's the js:

let inputval = document.querySelector('#cityinput')
let btn = document.getElementById('add')

inputval.addEventListener("keypress", function(event) {
if (event.key === "Enter") {
  event.preventDefault();
  document.getElementById("add").click();
      
     fetch('......')

When I press Enter it works, but I can't find a way to fetch even clicking the button.

Have a look at this [fiddle][1] you can call a certain function onClick and inside your listener [1]: jsfiddle.net/L2reck04 — SteelNation
– SteelNation, Commented Aug 16, 2022 at 9:33
wrap your form inputs with <form> tag, add button with type='submit' attribute. Then attach submit even listener to your form using JS and call e.preventDefault() to prevent default behavior.. — bogdanoff
– bogdanoff, Commented Aug 16, 2022 at 9:36

Iresh Sharma · Accepted Answer · 2022-08-16 09:37:17Z

1

The button is an input of type="submit" which by default triggers a page reload, either make it a <button> or keep it an <input type="submit" /> but then in this case you'll have do a event.preventDefault() followed by the desired logic.

answered Aug 16, 2022 at 9:37

Iresh Sharma

614 bronze badges

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

Comments

brk · Accepted Answer · 2022-08-16 09:48:25Z

0

You can put the inputs inside a form . Then enter will find first submit button and will trigger click

let form = document.getElementById('form');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log("Pressed")

});

<div class="inputdiv">
  <form id="form">
    <input type="text" placeholder="Enter City, Country" id="cityinput">
    <input type="submit" value="Submit" id="add">
  </form>
</div>

answered Aug 16, 2022 at 9:48

brk

50.3k10 gold badges59 silver badges85 bronze badges

Collectives™ on Stack Overflow

Trigger a button with both Click and Enter key for fetching Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related