Working with the DOM for forms in IE

[Zetten]

This is going to be a long one, but hopefully that will make it easier to understand. I know I don't like posts with too little detail when I'm searching for help.

I am creating a form with which a user can make forms. After filling in basic details like Title, Author, Description, the user can add multiple input fields of different types.

This is done in the form of a table, with each row acting for a single input, i.e. input1, input2, input3, etc. The user selects the input type (text, textarea, dropdown, radio, checkboxes) from a dropdown box, which dynamically changes the contents of the adjacent cell to give them the appropriate fields for that input.

For example, I want my first input to be 'text', so I select that. I can then give a title, description and length for the text box. I want my second input to be a dropdown box, so I select that. Now I can add the title and description, but I have a spinner to select the number of choices in the dropdown box, and a series of text boxes to type my choices in (which of course changes according to the spinner).

Eventually all the form details get passed to an ASP script which generates an XML file containing all the relevant information. Then a different ASP script can come along and parse that XML and create the form I wanted to make, nicely integrated with the rest of my website.

All of that stuff works just fine. I'm a javascript novice, but I have managed to make some progress and I feel reasonably comfortable using the DOM to add elements and things.

My problem is this: Internet Explorer (I'm testing in IE6 and IE7) doesn't like it when I try to work with radio buttons. I'm making the settings for a radio button input, and I would like the user to be able to select a preset option. I have the structure working pretty well - the user ticks a box if they want a preset option, and magically some radio buttons appear next to their list of options.

The idea is that they can select one of the radio buttons to choose that option as their preset one.

Sub-problem 1: IE does not display the radio buttons correctly. As far as I can tell, they still function, but if you click on one of the dynamically-created radio buttons, it doesn't 'fill in' like a normal one does. Firefox displays them fine.

Sub-problem 2: To get around that, I wanted to give a light shading to the input box which has been pre-selected as a visual cue. Sounds simple enough, right? Well IE again doesn't want to work.

I know I have to iterate over the list of radio buttons and use "if x.checked" on each to see if that one's checked. The way I understand it is that you grab all the elements with a given name (i.e. the radio buttons) and use them like an array. Again, this works just fine in Firefox.

IE throws up an error, saying "'undefined' is null or not an object".

Even a little test to get the length of the array (document.formCreator.input1_chk.length) says "'.length' is null or not an object". That's obviously wrong. Using the same code, Firefox gives the number of options with no problem.

I either need the first problem or the second problem fixed, since they're both supposed to be doing roughly the same thing (that is, giving the user a visual reference for their pre-selected option).

Here's the code for the colour changing:

function selectRadio(id) {
    var inputTbody = document.getElementById(id.replace("_chk","_tbod"));
    var newID = id.replace("_chk","");
    var count = document.getElementById(id.replace("_chk","_count")).value;
    var radioObj = document.formCreator.input1_chk;
 
    for (i=0;i<=(count-1);i++) {
        if (radioObj[i].checked) {
            document.getElementById(newID+"_optrow"+(i+1)).style.backgroundColor = "#cccccc";
        } else {
            document.getElementById(newID+"_optrow"+(i+1)).style.backgroundColor = "#ffffff";
        }
    }
    }

'formCreator' is the name of the form, 'input1_chk' is the name of the radio buttons for all the options in input1, 'id' coming into the function is the name as well (this.name from the radio buttons), I was just forcing it to check input1 to debug.

Any ideas at all would be welcome, I've been working on this for a while now.

[acoder]

Can you show the code that you use to create the radio buttons? IE doesn't set the name of dynamically created elements which might be the problem here.

[Zetten]

The radio buttons are created by this code:

function preselOpt(checkid) {
    var inputTbody = document.getElementById(checkid.replace("_presel","_tbod"));
    var newID = checkid.replace("_presel","");
    var numEls = document.getElementById(newID+"_count").value;
 
    if (document.getElementById(checkid).checked) {        
        for (i=1;i<=numEls;i++) {
            dynamic["newOptCheck"+i] = document.createElement("input");
            dynamic["newOptCheck"+i].type = "button";
            dynamic["newOptCheck"+i].name = newID+"_opt"+i;
            dynamic["newOptCheck"+i].id = newID+"_opt"+i;
            dynamic["newOptCheck"+i].value = "Pre-select";
            dynamic["newOptCheck"+i].className = "presel";
            dynamic["newOptCheck"+i].onclick = function() { selectRadio(this.name) };
 
            document.getElementById(newID+"_optrow"+i).appendChild(dynamic["newOptCheck"+i]);
        }
        var selectedOpt = document.createElement("input");
        selectedOpt.type = "hidden";
        selectedOpt.id = newID+"_selectedOpt";
        selectedOpt.name = newID+"_selectedOpt";
 
        inputTbody.appendChild(selectedOpt);
    } else {
        var toRemove = document.getElementById(newID+"_selectedOpt");
        toRemove.parentNode.removeChild(toRemove);
 
        for (i=1;i<=numEls;i++) {
            var removeInput = document.getElementById(newID+"_optrow"+i).childNodes[1];
            removeInput.parentNode.removeChild(removeInput);
        }
    }
    }

'checkid' is the 'this.name' of the checkbox which the user ticks to bring up the radio buttons (which calls this function as an onclick event). 'dynamic' is a variable set outside the functions as 'var dynamic = new Object()'.

I would have hoped that setting the '.name = xxx' would work. It seems to be working when I do similar things with other stuff. Is there a DOM inspector for IE in the same vein as Firebug for Firefox, just to make sure?

I realise I'm not the most proficient coder out there, but as I said, I know enough to get stuff working most of the time. That dynamic bit in particular is probably quite amateur, but I needed to have dynamic variable names (as I would use { } in PHP) and that was the simplest solution I could find.

I doubt I'll change this project in a big way, but any tips for future coding are welcome.

Edit: I should add that I have temporarily worked around it by using buttons (i.e. 'Pre-select this item'), so it's not time-critical, but I'd still like a solution for reference.

[Zetten]

Apologies for the double-post, but this is distinct enough that I didn't want to fill the other post up more than necessary.

Apparently, after some more testing, IE isn't setting the name attribute, which just completely baffles me - who on earth thought that would be a good idea? Looking around the net, this isn't an uncommon finding, but there doesn't seem to be a single, vouched-for workaround.

The three user agents I'm aiming at are IE6, IE7 and Firefox; is there any way to apply the name attribute in a single method that works in all three? The nearest I've found is this:

if (document.all) {
    element =
      document.createElement('< '+type+' name="'+name+'" />');
  } else {
    element = document.createElement(type);
    element.setAttribute('name', name);
  }

I don't like the idea of using document.all though. I'll give it a shot for now, but does anyone have any suggestions for a different method?

Edit: Okay, that solves part of the problem, but it doesn't let me change the name attribute, just set it when I create the element for the first time. Changing it seems more complex.

[acoder]

Yes, it is more complex. Welcome to IE DOM miseries (unfortunately :()

For the naming while creating elements, you can use something like:

var createElementWithName = ( function(){
  try {
    var el = document.createElement( '<div name="foo">' );
    if( el.tagName !== 'DIV' || el.name !== 'foo' ){
      throw 'create failed';
    }
    return function( tag, name ){
      return document.createElement( '<' + tag + ' name="' +
        name + '"></' + tag + '>' );
    };
  }catch( e ){
    return function( tag, name ){
      var el = document.createElement( tag );
      el.setAttribute( 'name', name );
      return el;
    };
  }
})();

(courtesy of easy-reader.net).

[Zetten]

After yet more testing, it seems that while the name attribute isn't visibly attached to the element in IE (in the same way it is in Firefox) it still acts like it is.

I'm successfully sending the form to an ASP script which can grab the form data from named fields, even if the name isn't visible. I guess it's still attached in the DOM somehow, even if it's not visible in IE. It's still amazingly stupid not to show it in the same way as other browsers, but at least it's there.

Despite all indications, it seems to all be working quite well, miraculously. I was worried I'd have to rewrite large chunks of my code, but now I get to do the fun stuff; processing the results from this form to create the XML form template :)

[acoder]

Ok, that's good to hear. Post again if you have more questions.