How to use addEventListener on multiple input fields to invoke keyup event on them in JavaScript?

Question

I have multiple input fields on which I want to apply onkeyup event on all of them with passing ID of textbox as a parameter. I want multiple keyup event because I want to handle some calculations on the basis of input ID. I tried but failed. Please suggest some solutions.

function GetDynamicTextBox(value) {
            return "<td>"
            +"<select class='js-example-placeholder-single js-states form-control loadcompany' id='lcompanyselect' onchange='getDriverAndTruck()';></select>"
            +"<input type='button' value='+' class='qty-plus' data-toggle='modal' data-target='#edit_co'></td>"
            +"<td><select class='js-example-placeholder-single js-states form-control' id='ldriverselect'></select>"
            +"<input type='button' value='+' class='qty-plus' data-toggle='modal' data-target='#edit_driver'></td>"
            +"<td class=''><select class='js-example-placeholder-single js-states form-control' id='ltruckselect'></select>"
            +"<input type='button' value='+' class='qty-plus' data-toggle='modal' data-target='#edit_truck'></td>"
            +"<td><input name='tripnumber' type='text' class='form-control' id='ltripnumber'/></td>"
            +"<td><select id='lsubtrip' name='subtrip' class='js-example-placeholder-single js-states form-control'>"
            +"<option disabled selected></option><option value='1'>1</option><option value='2'>2</option>"
            +"<option value='3'>3</option></select>"
            +"<td><input name='date' type='date' class='form-control' id='ldate'/></td>"
            +"<td><input name='pickupcity' type='text' class='form-control' id='lpickupcity'/></td>"
            +"<td><input name='pickupstate' type='text' class='form-control' id='lpickupstate'/></td>"
            +"<td><input name='deliverydate' type='date' class='form-control' id='ldeliverydate'/></td>"
            +"<td><input name='delivercity' type='text' class='form-control' id='ldelivercity'/></td>"
            +"<td><input name='deliverstate' type='text' class='form-control' id='ldeliverstate'/></td>"
            +"<td><input name='loadnumber' type='text' class='form-control' id='lloadnumber'/></td>"
            +"<td><input name='loadrate' type='text' class='form-control' id='lloadrate' onkeyup='countload();'/>"
            +"<span id='lerrormessage'></span></td>"
            +"<td><input name='dispatchfee' type='text' class='form-control' id='ldispatchfee' readonly/></td>"
            +'<td><input name="fuel" type="text" class="form-control count" id="lfuel" onkeyup=\"lcount('"+lfuel+"');\"/></td>'
            +"<td><input name='cardfee' type='text' class='form-control count' id='lcardfee' onkeyup='lcount('lcardfee');'/></td>"
            +"<td><input name='onloadrepair' type='text' class='form-control count' id='lonloadrepair' onkeyup='lcount('lonloadrepair');'/></td>"
            +"<td><input name='shoprepair' type='text' class='form-control count' id='lshoprepair' onkeyup='lcount('lshoprepair');'/></td>"
            +"<td><input name='trailerrent' type='text' class='form-control count' id='ltrailerrent' onkeyup='lcount('ltrailerrent');'/></td>"
            +"<td><input name='comcheck' type='text' class='form-control count' id='lcomcheck' onkeyup='lcount('lcomcheck');'/></td>"
            +"<td><input name='advance' type='text' class='form-control count' id='ladvance' onkeyup='lcount('ladvance');'/></td>"
            +"<td><input name='miscellenous' type='text' class='form-control count' id='lmiscellenous' onkeyup='lcount('lmiscellenous');'/></td>"
            +"<td><input name='misc1' type='text' class='form-control count' id='lmisc1' onkeyup='lcount('lmisc1');'/></td>"
            +"<td><input name='misc2' type='text' class='form-control count' id='lmisc2' onkeyup='lcount('lmisc2');'/></td>"
            +"<td><input name='misc3' type='text' class='form-control count' id='lmisc3' onkeyup='lcount('lmisc3');'/></td>"
            +"<td><input name='misc4' type='text' class='form-control count' id='lmisc4' onkeyup='lcount('lmisc4');'/></td>"
            +"<td><input name='total' type='text' class='form-control' id='ltotal' readonly/></td>"
            +"<td><input name='layover' type='text' class='form-control count' id='llayover' onkeyup='lcount('llayover');'/></td>"
            +"<td><input name='addtl1' type='text' class='form-control count' id='laddtl1' onkeyup='lcount('laddtl1')'/></td>"
            +"<td><input name='addtl2' type='text' class='form-control count' id='laddtl2' onkeyup='lcount('laddtl2');'/></td>"
            +"<td><input name='addtl3' type='text' class='form-control count' id='laddtl3' onkeyup='lcount('laddtl3');'/></td>"
            +"<td><input name='subtotal' type='text' class='form-control' id='lsubtotal' readonly/></td>"
            +"<td><input name='paymentmode' type='text' class='form-control' id='lpaymentmode'/></td>"
            +"<td><input name='pay' type='text' class='form-control' id='lpay' onkeyup='countleftpay();'/></td>"
            +"<td><input name='notes' type='text' class='form-control' id='lnotes'/></td>"
            +"<td><input name='grandtotal' type='text' class='form-control' id='lgrandtotal' readonly/></td>"
            +"<td><button type='button' class='btn btn-outline-info text-info' onclick='savetriplist();'>Submit</button>" 
        }

*"I tried but failed"* Please include your attempt(s) so we can help you understand what is wrong. -> [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) — Reyno, Dec 09 '21 at 07:59
You mean you want to define one event handler that applies on some inputs or you want to have some onkeyup handler on every input? — Saeed Shamloo, Dec 09 '21 at 08:17
@Reyno I tried this way : var inputhandler = document.getElementsByClassName('count'); for(var i =0; i < inputhandler.length; i++){ inputhandler[i].addEventListener("keyup", count()); } — Rakhi, Dec 09 '21 at 08:28
There is no element with class name `count` in your code so `document.getElementsByClassName('count');` won't get anything. — aerial, Dec 09 '21 at 08:34
@Rakhi ... 1/2 ... most probably the OP is in need of just as single event listener which will (has to) be assigned/attached to the very element node where the return value of `GetDynamicTextBox` gets/was rendered into. Thus it was nice to have provided with the example code the meta/outer html structure as well. — Peter Seliger, Dec 09 '21 at 08:34
@Rakhi ... 2/2 ... The to be used technique is referred to as [Event delegation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation) ... [David Walsh :: How JavaScript Event Delegation Works](https://davidwalsh.name/event-delegate) ... [javascript.info :: Event Delegation](https://javascript.info/event-delegation) ... [jQuery :: Understanding Event Delegation](https://learn.jquery.com/events/event-delegation/) — Peter Seliger, Dec 09 '21 at 08:41
If possible, can you please show me an example to use keyup event on multiple input and I want to compare or check which input field is entered and do some calculations.? — Rakhi, Dec 09 '21 at 10:25

Peter Seliger · Answer 1 · 2021-12-09T13:18:54.053

From the above comments ...

1/2 ... most probably the OP is in need of just as single event listener which will (has to) be assigned/attached to the very element node where the return value of GetDynamicTextBox gets/was rendered into. Thus it was nice to have provided with the example code the meta/outer html structure as well.

2/2 ... The to be used technique is referred to as Event delegation ... David Walsh :: How JavaScript Event Delegation Works ... javascript.info :: Event Delegation ... jQuery :: Understanding Event Delegation

function createTextBoxMarkup(/* value */) {
  return `
    <td>
      <input name = "deliverydate" type="date" class="form-control" id="ldeliverydate"/>
    </td>
    <td>
      <input name = "delivercity" type="text" class="form-control" id="ldelivercity"/>
    </td>
    <td>
      <input name = "deliverstate" type="text" class="form-control" id="ldeliverstate"/>
    </td>`;
}

function handleTextBoxKeyup(evt) {
  const elmInput = evt.target;
  const { type, name, id, value } = elmInput;

  console.log({ elmInput, type, name, id, value });  
}

function init() {
  const elmTBody = document.querySelector('tbody');
  const elmTr = document.createElement('tr');

  elmTr.innerHTML = createTextBoxMarkup();
  elmTBody.appendChild(elmTr);

  // register 'keyup' event type.
  elmTBody.addEventListener('keyup', handleTextBoxKeyup);
}
init();

body { margin: 0; }
.as-console-wrapper { min-height: 83%; }

<table>
  <tbody>
  </tbody>
</table>

Edit according to further questions of the OP

Can I use something like

function GetDynamicTextBox(value) {
  return '<td><input type="text" id="lfuel" onkeyup="count('lfuel');"/></td><td><input type="text" id="lcardfee" onkeyup="count('lcardfee');" /></td>'
}

and then define that count like :

function count(id) {
  if (id == 'lfuel') {
    var a = document.getElementById('lfuel').value;
  }
  if (id == 'lcardfee') {
    var b = document.getElementById('lcardfee').value;}
}

– Rakhi

Above solution did not worked for me. – Rakhi

The implementation of handleTextBoxKeyup is just example code which demonstrates how information can be extracted from the event object. Of cause the OP can implement the handler according to her/his needs e.g. invoking a count function from within the handler whenever the event.target is an input element of type "text".

function createTextBoxMarkup(/* value */) {
  return `
    <td>
      <input name = "deliverydate" type="date" class="form-control" id="ldeliverydate"/>
    </td>
    <td>
      <input name = "delivercity" type="text" class="form-control" id="ldelivercity"/>
    </td>
    <td>
      <input name = "deliverstate" type="text" class="form-control" id="ldeliverstate"/>
    </td>`;
}

function isTextTypeInputElement(elmNode) {
  return (
    (elmNode?.tagName.toLowerCase() === 'input') &&
    (elmNode?.type === 'text')
  );  
}

function count(elmTextInput) {
  const {  name, id, value } = elmTextInput;

  console.log({ elmTextInput, name, id, value }); 
}

function handleTextBoxKeyup(evt) {
  const elmNode = evt.target;
  if (isTextTypeInputElement(elmNode)) {
  
    count(elmNode);
  }
}

function init() {
  const elmTBody = document.querySelector('tbody');
  const elmTr = document.createElement('tr');

  elmTr.innerHTML = createTextBoxMarkup();
  elmTBody.appendChild(elmTr);

  // register 'keyup' event type.
  elmTBody.addEventListener('keyup', handleTextBoxKeyup);
}
init();

body { margin: 0; }
.as-console-wrapper { min-height: 83%; }

<table>
  <tbody>
  </tbody>
</table>

Can I use something like function GetDynamicTextBox(value) { return ''} — Rakhi, Dec 09 '21 at 10:41
and then define that count like : function count(id){ if(id=='lfuel'){ var a = document.getElementById('lfuel').value; } if(id=='lcardfee'){var b = document.getElementById('lcardfee').value;}} — Rakhi, Dec 09 '21 at 10:43
@Rakhi ... the implementation of `handleTextBoxKeyup` is just example code which demonstrates how information can be extracted from the `event` object. Of cause the OP can implement the handler according to her/his needs e.g. invoking a `count` function from within the handler whenever the `event.target` is an input element of type `"text"`. — Peter Seliger, Dec 09 '21 at 12:58
I got your point but I want to know that how to pass input id to count() function as a string. Example . I am getting error here. — Rakhi, Dec 09 '21 at 13:15
@Rakhi ... I doubt the OP got the point. Otherwise the OP was able to change the example's handler function her/himself towards invoking the OP's `count` function from within the handler with a valid `id` value. ... btw ... The above example code did change in order to just demonstrate that. And of cause one does not need to pass the `id` value since one already can provide the correct `input` element. — Peter Seliger, Dec 09 '21 at 13:24

How to use addEventListener on multiple input fields to invoke keyup event on them in JavaScript?

1 Answers1

Linked

Related