Two script keydown not detected with two forms

Question

Hey I have a simple code with two form and two javascript. When I clicked num key 1 or 9 should be send form, and only working with last one form. If I switch javascript code and the last one will be keycode 49 (1) then numer 1 is working but num 9 not. Problem is because on the same page I had 2 separately forms

function submitForm() {
    document.priceOptionForm.submit();
    document.priceOptionForm.method='post';
}
document.onkeydown = function () {
    if (window.event.keyCode == '49') {
        submitForm();
    }
}
document.getElementById("profile_price").onclick = submitForm;

function submitForm2() {
    document.priceOptionForm2.submit();
    document.priceOptionForm2.method='post';
}
document.onkeydown = function () {
    if (window.event.keyCode == '57') {
        submitForm2();
    }
}
document.getElementById("profile_price2").onclick = submitForm2;

<form action="" method="post" class="priceOptionForm" name="priceOptionForm">
    <input name="paypal_email" type="text" value="whatever" id="email">
    </label>
<a href="javascript:void(0);" class="bluebtn" id="profile_price" style="width:60px;margin-top:5px;">Save all</a>

</form>


<form action="" method="post" class="priceOptionForm2" name="priceOptionForm2">
    <input name="paypal_email" type="text" value="whatever" id="email">
    </label>
<a href="javascript:void(0);" class="bluebtn" id="profile_price2" style="width:60px;margin-top:5px;">Save all</a>

</form>

Did you try to wrap all of the code in 'addEventListener'? it sounds like your code works fine but only 1 time (javascript take the last row and run it), you can read on addEventListener here: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event — tomer raitz, Apr 11 '19 at 07:35

score 0 · Accepted Answer · answered Apr 11 '19 at 07:32

An element can only have one 'direct' event call back per event type. By using document.onkeydown a second time, you overwrite the first one. Either put all code in one callback function or (and this is recommended) use addEventListener('keydown', callbackFunction). This way you can have multiple callback per event type per element

You should do this for every event, because, even if it works now, your event code would be prone to being overwritten somewhere else.

function submitForm() {
  document.priceOptionForm.method = 'post';
  document.priceOptionForm.submit();
}
document.addEventListener('keydown', function(e) {
  if (e.keyCode == '49') {
    console.log(1)
    submitForm();
  }
})
document.getElementById("profile_price").addEventListener('click', submitForm);

function submitForm2() {
  document.priceOptionForm2.method = 'post';
  document.priceOptionForm2.submit();
}
document.addEventListener('keydown', function(e) {
  if (e.keyCode == '57') {
    console.log(9)
    submitForm2();
  }
})
document.getElementById("profile_price2").addEventListener('click', submitForm2);

<form action="" method="post" class="priceOptionForm" name="priceOptionForm">
  <input name="paypal_email" type="text" value="whatever" id="email">
  </label>
  <a href="javascript:void(0);" class="bluebtn" id="profile_price" style="width:60px;margin-top:5px;">Save all</a>

</form>


<form action="" method="post" class="priceOptionForm" name="priceOptionForm2">
  <input name="paypal_email" type="text" value="whatever" id="email">
  </label>
  <a href="javascript:void(0);" class="bluebtn" id="profile_price2" style="width:60px;margin-top:5px;">Save all</a>

</form>

its works on chrome but isn't on IE, I need only IE solution can you help me again? — working4545, Apr 11 '19 at 08:12
@working4545 See here: https://stackoverflow.com/questions/6927637/addeventlistener-in-internet-explorer — yunzen, Apr 11 '19 at 09:16

score 0 · Answer 2 · answered Apr 11 '19 at 07:32

I think the problem is because you passed the listener directly to document.onkeydown twice. By doing that you just override the first listener of document.onkeydown by the second listener. You should add the event listeners using addEventListener so both listeners will persist.

document.addEventListener('keydown', function listenerOne () {})

document.addEventListener('keydown', function listenerTwo () {})

Two script keydown not detected with two forms

2 Answers2