How to get element by name with $key

Question

PHP

  //Here is my html for qty

       <p>Qty : <input type="number"  value="" name="qty<?php echo $key ?>   onChange="findTotal()"/> 

JS function

        function findTotal() {
        var arr = document.getElementsByName('qty');
      ...

        document.getElementById('result').value = decimalPlaces(tot, 2);

        }

My qty name needs key for post array. How do I get name inside js function to calculate quantities?

Answer 1

You can use

document.querySelector("input['name^='qty']").value

if you don't have jQuery.

This will select an input with name attribute starting with "qty". If you have multiple inputs which match the criteria you can select them all using

document.querySelectorAll("input[name^='qty']")

which will return a NodeList . You can read more about this here .

Answer 2

You can do something like this

  var myVar = document.getElementsByTagName("somename");
  //do something else

If you are using jquery

value = $( "input[name^='qtd']" ).val();
//it will pick the input wich name starts with 'qtd'

Answer 3

In pure DOM, you could use getElementsByTagName to grab all input elements, and loop through the resulting array. Elements with name starting with 'qty' get pushed to another array:

var eles = [];
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].name.indexOf('qty') == 0) {
        eles.push(inputs[i]);
    }
}

Answer 4

Don't query the element by the name attribute's value. I'm not sure what's the purpose of the key and why you need it in the findTotal method, but here's an example:

<p>Qty : <input type="number" value="" name="qtyMyKey" onChange="findTotal(event)" /></p>

  <script>
    function findTotal(e) {

      var inputEl = e.target,
        inputName = inputEl.getAttribute('name'),
        myKey;

      if (typeof inputName === 'string') {
        myKey = inputName.replace('qty', '');
      }

      console.log(myKey);

      //var arr = document.getElementsByName('qty');
      //document.getElementById('result').value = decimalPlaces(inputEl.value(), 2);
    }

  </script>

---

Here's the jsFiddle demo .