Get input value from each row in JavaScript

Question

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 1

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,