How to change my js function from on click of enter to when i click submit button

Question

I have a js script that I am extending to meet my needs as I'm still pretty new to JavaScript and have tried a few things but cant seem to get them to work.Here is part of JavaScript script if more is needed I can put more of it up.What I would like to do is have it work exactly the same way but instead of hitting the enter key i want to have the user click submit (or a button that looks like submit would work too) with their mouse.

(function () {

'use strict';

var ENTER_KEY = 13
var auditor = document.getElementById('auditor');
var date = document.getElementById('date');
var location = document.getElementById('location');
var workers = document.getElementById('workers');
var contact = document.getElementById('contact');

Where ENTER_KEY gets used (for second time)

  function newTodoKeyPressHandler( event ) {
if (event.keyCode === ENTER_KEY) {
   addTodo(auditor.value,date.value,location.value,workers.value,contact.value,company.value,exposureLocation.value,workersExposed.value,exposures.value,interventions.value,interventionComments.value,additionalComments.value,programManagement.value);
  auditor.value = '';
  date.value= '';
  location.value = '';
  workers.value = '';
  contact.value = '';
  company.value = '';
  exposureLocation.value = '';
  workersExposed.value = '';
  exposures.value = '';
  interventions.value = '';
  interventionComments.value = '';
  additionalComments.value = '';
  programManagement.value = '';

 }
}

If anyone could help to accomplish this I would greatly appreciate it. I already know ill have to change event.keyCode to something else but the things I tried were to no avail. Thanks

try referring this http://stackoverflow.com/questions/895171/prevent-users-from-submitting-form-by-hitting-enter — Milan, Nov 29 '16 at 18:50

score 4 · Accepted Answer · answered Nov 29 '16 at 18:55

4

So if I understand correctly, your newTodoKeyPressHandler is being invoked on press of a keyboard button. Basically, you need to define an event handler for mouse click and then add a listener for the same as follows:

 document.getElementById('button').addEventListener(
    'click',
    mouseClickHandler,
    false
 );

// mouseClickHandler Function

 function mouseClickHandler(event){
     ... (handler code, same as in the keypress handler)

 }

answered Nov 29 '16 at 18:55

Amoolya S Kumar

1,458
9
10

Thank you very much, I think i pretty much get it, although what does false do? – Joseph Mckenzie Nov 29 '16 at 19:46
Do check out detailed documentation of addEventListener here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener . Basically, the third parameter is an options array, and you can check out the documentation for all possible options. – Amoolya S Kumar Nov 29 '16 at 19:49

score 1 · Answer 2 · answered Nov 29 '16 at 18:58

there a few ways of doing this you can try this first

<button onclick=" newTodoKeyPressHandler()">Click me</button>

you create the button with a onclick attribute and set the function to do that but you may need to add return false to prevent default action in the form from posting and reloading the page.

How to change my js function from on click of enter to when i click submit button

2 Answers2