populate hidden field from other text fields javascript

Question

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 welcome.

Answer 1

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;
}

Answer 2

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))