Get input value from each row in JavaScript Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Get input value from each row in JavaScript without wasting too much if your time.

The question is published on by Tutorial Guruji team.

function shortDescription(a){
    var descriptionInput;
    var tbl = $(document.getElementById('21.125-mrss-cont-none-content'));
    tbl.find('tr').each(function () {
        $(this).find("input[name$='6#if']").keypress(function (e) {
            if (e.which == 13) {
                descriptionInput = $(this).val();
                $(this).val(descriptionInput);
                $(document.getElementById('__AGIM0:U:1:4:2:1:1::0:14')).val(descriptionInput);
            }
            console.log(descriptionInput);
        });

    });
});
}

This code works perfectly but how do I write this in pure JavaScript? I’m mainly interested in this: How do I perform these tasks without jQuery?

for each row, find the input name that ends in 6#if (the column I want)

on enter, get this input value and add to the console it so I know it’s there

input id = "grid#21.125#1,6#if" type="text" value"" name="grid#21.125#1,6#if 
oninput = shortDescription(this);

Answer

It would be great if you could share a piece of HTML on wich we could try some things, but for the moment, here’s what your code looks like written in pure JS :

var descriptionInput;
var tbl = document.getElementById('21.125-mrss-cont-none-content')
Array.from(tbl.getElementsByTagName('tr')).forEach(function(tr) {
  Array.from(tr.querySelectorAll("input[name$='6#if']")).forEach(function(input) {
    input.onkeypress = function(e) {
      if (e.keyCode == 13) {
        descriptionInput = input.value;
        input.value = descriptionInput; // why ??
        document.getElementById('__AGIM0:U:1:4:2:1:1::0:14').value = descriptionInput;
      }
        console.log(descriptionInput);
    }
  });
});

If you’re not OK with the querySelectorAll, you can use getElementsByTagName, it returns a NodeList that you can turn into an array with the Array.from method and the use filter on the name to find the input with a name containing “6#if”.

Best practices …

Since an ID is unique and the methods getElementsByTageName or getElementsByTagName returns a Live HTMLCollection, it’s better if you use these elements as unique variables, so you won’t ask your browser to fetch them many times. Since I don’t know what your elements means, I will name the variables with trivial names, here’s a better version of the code :

var descriptionInput;
var tbl = document.getElementById('21.125-mrss-cont-none-content');
var tr1 = tbl.getElementsByTagName('tr');
var el1 = document.getElementById('__AGIM0:U:1:4:2:1:1::0:14');

var inputsInTr = Array.from(tr1).map(function(tr) { 
  return Array.from(tr.getElementsByTagName('input'));
}).reduce(function(pv, cv) {
  return pv.concat(cv);
});
var myInputs = inputsInTr.filter(function(input) {
  return input.name.indexOf('6#if') != 0;
});

myInputs.forEach(function(input) {
  input.onkeypress = function(e) {
    if (e.keyCode == 13) {
      descriptionInput = input.value;
      el1.value = descriptionInput;
    }
    console.log(descriptionInput);
  }
});

I didn’t try it, hope it’s OK.

Hope it helps, Best regards,

We are here to answer your question about Get input value from each row in JavaScript - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji