Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get element by part of Name or ID

Here is an example of my form (only inputs that I want, but there is many others):

<form name="inputform" action="..." method="post">     <input type="hidden" name="id_qtedje_77" id="id_qtedje_77" value="0">     <input type="text" id="id_qte_77" name="prestation_detail_fields[77][qte_collecte]" value="0.00">     <input type="text" id="id_rec_77" name="prestation_detail_fields[77][reliquat_conforme]" value="0.00">     <input type="text" id="id_ren_77" name="prestation_detail_fields[77][reliquat_non_conforme]" value="0.00">     <input type="checkbox" name="prestation_detail_fields[77][dechet_non_present]" value="1">          <!-- another TR -->          <input type="hidden" name="id_qtedje_108" id="id_qtedje_108" value="0">     <input type="text" id="id_qte_108" name="prestation_detail_fields[108][qte_collecte]" value="0.00">     <input type="text" id="id_rec_108" name="prestation_detail_fields[108][reliquat_conforme]" value="0.00">     <input type="text" id="id_ren_108" name="prestation_detail_fields[108][reliquat_non_conforme]" value="0.00">     <input type="checkbox" name="prestation_detail_fields[108][dechet_non_present]" value="1"> </form> 

What I want is to get values of inputs, but as the form is built in PHP, I don't know the line identifier (77, 108).

Is there a way to do something like getElementByName('id_qtedje_%') ?

Note: I'm not using any library, and I don't plan to use one.

like image 938
pistou Avatar asked Apr 08 '13 08:04

pistou


People also ask

How do I find an element with a specific ID?

getElementById() The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.

Should I use getElementById or querySelector?

The getElementById method retrieves an element by its DOM ID. Both methods have wide browser support. You should opt to use the querySelector method if you need to select elements using more complex rules that are easily represented using a CSS selector.

Can you get multiple elements by ID?

As per the W3c spec, id attributes "must be unique within a document". That's the whole point of a unique identifier, and is why you don't have DOM methods to get multiple elements with the same ID (since the latter doesn't make any sense).


2 Answers

Your best bet is probably document.querySelectorAll, which you can use any CSS selector with, including an "attribute starts with" selector like input[id^="id_qtedje_"]. It's supported on all modern browsers, and also IE8:

var elements = document.querySelectorAll('input[id^="id_qtedje_"]'); 

If you wanted just the first match (rather than a list), you could use document.querySelector instead. It returns a reference to the first match in document order, or null if nothing matched.

Alternately, you could give the elements a class name, then use document.getElementsByClassName, but note that while getElementsByClassName was supported in old versions of Chrome and Firefox, IE8 doesn't have it, so it's not as well-supported as the more-useful querySelectorAll in the modern era.

var elements = document.getElementsByClassName("theClassName"); 

If you use any libraries (jQuery, MooTools, Closure, Prototype, etc.), they're likely to have a function you can use to look up elements by just about any CSS selector, filling the gaps in browser support with their own code. For instance, in jQuery, it's the $ (jQuery) function; in MooTools and Prototype, it's $$.

like image 188
T.J. Crowder Avatar answered Sep 22 '22 21:09

T.J. Crowder


You can use the starts with selector in jQuery

var listOfElements = $('[name^="id_qtedje_"]') 

You may also be interested with the contains and ends with selectors


Using querySelectorAll, you can do

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

Alternatively:

Assuming that all elements are inputs, you may use this:

function getElementByNameStart(str) {     var x=document.getElementsByTagName('input')     for(var i=0;i<x.length;i++) {         if(x[i].indexOf(str)==0) {             return x[i];         }     } } 

which can be called as getElementByNameStart("id_qtedje_")

Note that this only returns the first element of this type. To return all:

function getElementByNameStart(str) {     var x=document.getElementsByTagName('input')     var a=[];     for(var i=0;i<x.length;i++) {         if(x[i].indexOf(str)==0) {             a.push(x[i])         }     }     return a; } 

If the elements are of any type, replace "input" with "*" (beware, this may make your code slow)

like image 41
Manishearth Avatar answered Sep 22 '22 21:09

Manishearth