Using Javascript to trigger form submission using arrow keys

Question

Using Javascript to trigger form submission using arrow keys

There are four forms displayed on a single page, and I want each form to be submitted based on the arrow key that is pressed.

<form  name='go_north' action='' method='post'>
<input type='hidden' name='direction' value='north' />
</form>

<form  name='go_east' action='' method='post'>
<input type='hidden' name='direction' value='east' />
</form>

etc...

I understand how to achieve this with text inputs that have focus, but I am struggling to implement it with hidden inputs. Additionally, it should only work in Chrome. Any suggestions or advice on how to tackle this issue would be highly appreciated.

javascript submit arrow-keys

Answer 1

Answer №1

Implement a

document.addEventListener("keydown", function(){})

to detect key presses, then identify the keycode and use it to submit a form based on the pressed key.

You can easily submit forms by selecting the form and invoking .submit() on it!

document.addEventListener("keydown", function(event) {
  var code;
  if (event.key !== undefined) {
    code = event.key;
  } else if (event.keyIdentifier !== undefined) {
    code = event.keyIdentifier;
  } else if (event.keyCode !== undefined) {
    code = event.keyCode;
  }
  console.log(code);
  handleArrow(code);
});

function handleArrow(code) {
  switch (code) {
    case 'ArrowLeft':
      submitForm('go_west');
      break;
    case 'ArrowRight':
      submitForm('go_east');
      break;
    case 'ArrowDown':
      submitForm('go_south');
      break;
    case 'ArrowUp':
      submitForm('go_north');
      break;
  }
}

function submitForm(id) {
  $("#" + id).submit();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="go_north">
  <label for="north">north</label>
  <input id="north" type="text" name="north" value="north">
</form>
<form id="go_east">
  <label for="east">east</label>
  <input id="east" type="text" name="east" value="east">
</form>
<form id="go_south">
  <label for="south">south</label>
  <input id="south" type="text" name="south" value="south">
</form>
<form id="go_west">
  <label for="west">west</label>
  <input id="west" type="text" name="west" value="west">
</form>

Answer 2

Implement a

document.addEventListener("keydown", function(){})

to detect key presses, then identify the keycode and use it to submit a form based on the pressed key.

You can easily submit forms by selecting the form and invoking .submit() on it!

document.addEventListener("keydown", function(event) {
  var code;
  if (event.key !== undefined) {
    code = event.key;
  } else if (event.keyIdentifier !== undefined) {
    code = event.keyIdentifier;
  } else if (event.keyCode !== undefined) {
    code = event.keyCode;
  }
  console.log(code);
  handleArrow(code);
});

function handleArrow(code) {
  switch (code) {
    case 'ArrowLeft':
      submitForm('go_west');
      break;
    case 'ArrowRight':
      submitForm('go_east');
      break;
    case 'ArrowDown':
      submitForm('go_south');
      break;
    case 'ArrowUp':
      submitForm('go_north');
      break;
  }
}

function submitForm(id) {
  $("#" + id).submit();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="go_north">
  <label for="north">north</label>
  <input id="north" type="text" name="north" value="north">
</form>
<form id="go_east">
  <label for="east">east</label>
  <input id="east" type="text" name="east" value="east">
</form>
<form id="go_south">
  <label for="south">south</label>
  <input id="south" type="text" name="south" value="south">
</form>
<form id="go_west">
  <label for="west">west</label>
  <input id="west" type="text" name="west" value="west">
</form>

Using Javascript to trigger form submission using arrow keys

Answer №1

Similar questions

Guide to removing selected value from a combobox in Angular

I am facing an issue with Angular where the $http.get method is

How to manipulate iframe elements using jQuery or JavaScript

Displaying and hiding the Angular <object> element

Problem: Implementing a horizontal scrolling feature using Skrollr

Using Typescript to mute audio elements within HTML documents

authorization for certain express routes using passport.js

Which approach is more impactful: consistently sending an ajax request or breaking down the result within a function?

Avoid unnecessary re-renders in React Redux by ensuring that components do not update when properties are not utilized in their

The function designed to create in-line TailwindCSS classNames may work inconsistently in React and NextJS environments

Including variables in package.jsonORInjecting variables into package

Determining the total number of combinations possible from a collection of five arrays containing items

Obtaining the initial value from an Observable in Angular 8+

A guide to loading CSS and JavaScript files asynchronously

Tips for modifying the properties of variables within an array using JavaScript

Adjust the opacity of a div's background without impacting the children elements

Encountering an error stating that 'coordinates should consist of an array with two or more positions'

Developing a dynamic row that automatically scrolls horizontally

Encountering a 404 error while accessing my meticulously crafted express server

What is the method for defining functions that accept two different object types in Typescript?