I am trying to populate a hidden field by concatenating other textfields using javascript (without JQuery, just plain javascript).

The code I have below works perfectly in Chrome and Firefox, but dies in IE 8,9,10

Javascript

function buildhidden() {
var joinedvalues = textfield_id_1.value+textfield_id_2.value+textfield_id_3.value;
document.getElementById("hiddenfield_id").value = joinedvalues;
    };

html input fileds

<input type="text" name="textfield_id_1" id="textfield_id_1" value="" maxlength="1" onKeyUp="buildhidden();">

hidden field

<input type="hidden" name="hiddenfield_id" id="hiddenfield_id" value="" />

In IE, I get "textfield_id_1 is not defined" and no more.

Any help would be appreciated. I have tried explicitly declaring each text field:

var text1  = document.getElementById("hiddenfield_id").value;
var joinedvalues = text1+text2+ etc.

Which does not work either. I am a php dev, and JS is not my strong suite... any assistance is very wele.

I am trying to populate a hidden field by concatenating other textfields using javascript (without JQuery, just plain javascript).

The code I have below works perfectly in Chrome and Firefox, but dies in IE 8,9,10

Javascript

function buildhidden() {
var joinedvalues = textfield_id_1.value+textfield_id_2.value+textfield_id_3.value;
document.getElementById("hiddenfield_id").value = joinedvalues;
    };

html input fileds

<input type="text" name="textfield_id_1" id="textfield_id_1" value="" maxlength="1" onKeyUp="buildhidden();">

hidden field

<input type="hidden" name="hiddenfield_id" id="hiddenfield_id" value="" />

In IE, I get "textfield_id_1 is not defined" and no more.

Any help would be appreciated. I have tried explicitly declaring each text field:

var text1  = document.getElementById("hiddenfield_id").value;
var joinedvalues = text1+text2+ etc.

Which does not work either. I am a php dev, and JS is not my strong suite... any assistance is very wele.

• javascript
• html
• hidden
• populate

• Can you provide some more code or a JSFiddle? This works as expected when I try it in IE8, so I think maybe your problem lies elsewhere? – Johan Commented Apr 3, 2014 at 12:06

2 Answers 2

use document.getElementById('id here ') as all browsers don't expose the ids of elements to the global scope.

id.value // bad practice, not cross-browser
document.getElementById('id').value // good, cross browser

So do this:

function buildhidden() {
    var joinedvalues = document.getElementById('textfield_id_1').value + document.getElementById('textfield_id_2').value + document.getElementById('textfield_id_3').value;
    document.getElementById("hiddenfield_id").value = joinedvalues;
}

In IE colons of Id could get converted to underscore, you can use this method:

function convertNameToId(strId)
{
   reg = /:/g;
   return strId.replace(reg, "_");
}

and use:

document.getElementById(convertNameToId(strName))