I have some input fields that has its id's number changes dynamically.

For example, the below code shows an input field that has "id="field14". The word (field) in the id does not change, but the (number) is changing dynamically. So it may be field14, field13, or field20, etc, and there is no limit for numbers.

<input type="text" name="field[14]" id="field14" value="" size="30" style="height: 24px;">

I'm using the following code to style the input field:

document.getElementById("field14").style.height = "24px";

Note, the application's PHP code is encoded & I'm editing in smarty template.

The input code in the template is like this: {$field.input} So when I inspect element on the live page it shows the above code of the input with the dynamic number of the id.

I want a way that allow me to style any input field of the page that starts with the word (field) and ends with a dynamic (number). Any suggestions please?

I have some input fields that has its id's number changes dynamically.

For example, the below code shows an input field that has "id="field14". The word (field) in the id does not change, but the (number) is changing dynamically. So it may be field14, field13, or field20, etc, and there is no limit for numbers.

<input type="text" name="field[14]" id="field14" value="" size="30" style="height: 24px;">

I'm using the following code to style the input field:

document.getElementById("field14").style.height = "24px";

Note, the application's PHP code is encoded & I'm editing in smarty template.

The input code in the template is like this: {$field.input} So when I inspect element on the live page it shows the above code of the input with the dynamic number of the id.

I want a way that allow me to style any input field of the page that starts with the word (field) and ends with a dynamic (number). Any suggestions please?

• javascript
• jquery
• html
• css

• Are you open to using jQuery? – Drakes Commented Mar 30, 2015 at 14:26
• You can't add some class name for this specific input with smarty? – R3tep Commented Mar 30, 2015 at 14:27
• why not add a class for all inputs? – ChaosClown Commented Mar 30, 2015 at 14:30
• @JerryB have you tried something amongst the proposed solutions?? – Fabrizio Calderan Commented Mar 31, 2015 at 9:24

7 Answers 7

For a pure CSS approach, I would check the name instead, so you should only look for input elements whose attribute starts with field[ and ends with a closing bracket ].

e.g.

input[name^="field["][name$="]"] {
   ...
}

From the code you posted you can reasonably suppose that the name of all the elements containing a numeric index inside brackets [] are also the same elements with that dynamic index as a part of your id.

otherwise you may write a more plex set of selectors looking for an id starting with field and ending with a digit [0..9]

e.g.

input[id^="field"][id$="0"],
input[id^="field"][id$="1"],
input[id^="field"][id$="2"],
input[id^="field"][id$="3"],
input[id^="field"][id$="4"],
input[id^="field"][id$="5"],
input[id^="field"][id$="6"],
input[id^="field"][id$="7"],
input[id^="field"][id$="8"],
input[id^="field"][id$="9"] {
   ...
}

or even bine both the methods

input[name^="field["][name$="]"][id$="0"],
input[name^="field["][name$="]"][id$="1"],
...
input[name^="field["][name$="]"][id$="9"] {
   ...
}

You can use an attribute selector:

input[id^=field] {
    /* Styles */
}

It will match all input elements whose id attribute begins with "field". Using some separator between "field" and the number may be better to prevent matching things like "fieldone".

input[id^=field] {
  background: red;
}

<input id="field1" />
<input id="field2" />
<input id="field3" />
<input id="field15" />
<input id="field99" />

i strongly remand using a class attribute:

HTML

<input type="text" class="fields" name="field[14]" id="field14" value="" size="30" style="height: 24px;">

CSS

.fields {
  /*style*/
}

I want a way that allow me to style any input field of the page that starts with the word (field) and ends with a dynamic (number). Any suggestions please?

This is a very specific question that wants us to key on the fact that the id starts with "field" and ends in a dynamic number. IMHO this solution answers your question exactly as asked using only CSS, plus it doesn't require you to change your HTML or add a class attribute (although this would be much better).

This CSS code will find any <input> tag that has an id starting with "field" and ending in a number. It will also exclude those that start with "field" but do not end in a number.

input[id^='field'][id$='0'],input[id^='field'][id$='1'],input[id^='field'][id$='2'],input[id^='field'][id$='3'],input[id^='field'][id$='4'],input[id^='field'][id$='5'],input[id^='field'][id$='6'],input[id^='field'][id$='7'],input[id^='field'][id$='8'],input[id^='field'][id$='9']
{
    // styling code
}

Demo code: http://jsfiddle/Drakes/7wpnL/671/

If you need JS approach:

http://codepen.io/knitevision1/pen/LEaXxW

var num = 2;
document.getElementById("input" + num).style.backgroundColor = "blue";

If I get you right, you need all your new input look somewhat unique or something.

You can think of getting a number of the currently presenting inputs, then get the last of them, then attach your style based on what you want it to look like.

Using jquery:

    var inputs = [];
    function getFields(){
        $('input').each(function() {
            if($(this).attr('id').substring(0,5)=='field'){
                inputs.push($(this));
            }
        });
    }

you can modify each input inside the "each" loop, or you can use the "inputs" variable.

Demo: http://jsbin./kubaku/1/edit?html,js,output

JS

var inputs = document.getElementsByTagName('input');
var ID = 'field';
var i;

for(i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  var regex = new RegExp("^" + ID);

  if(regex.test(input.id)) {
    input.style.border = '1px solid #c00';
  }

}