473,231 Members | 1,574 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,231 software developers and data experts.

Working with the DOM for forms in IE

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:

Expand|Select|Wrap|Line Numbers
  1. function selectRadio(id) {
  2.     var inputTbody = document.getElementById(id.replace("_chk","_tbod"));
  3.     var newID = id.replace("_chk","");
  4.     var count = document.getElementById(id.replace("_chk","_count")).value;
  5.     var radioObj = document.formCreator.input1_chk;
  7.     for (i=0;i<=(count-1);i++) {
  8.         if (radioObj[i].checked) {
  9.             document.getElementById(newID+"_optrow"+(i+1)).style.backgroundColor = "#cccccc";
  10.         } else {
  11.             document.getElementById(newID+"_optrow"+(i+1)).style.backgroundColor = "#ffffff";
  12.         }
  13.     }
  14.     }
'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.
Aug 26 '08 #1
6 2483
16,027 Expert Mod 8TB
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.
Aug 26 '08 #2
The radio buttons are created by this code:
Expand|Select|Wrap|Line Numbers
  1. function preselOpt(checkid) {
  2.     var inputTbody = document.getElementById(checkid.replace("_presel","_tbod"));
  3.     var newID = checkid.replace("_presel","");
  4.     var numEls = document.getElementById(newID+"_count").value;
  6.     if (document.getElementById(checkid).checked) {        
  7.         for (i=1;i<=numEls;i++) {
  8.             dynamic["newOptCheck"+i] = document.createElement("input");
  9.             dynamic["newOptCheck"+i].type = "button";
  10.             dynamic["newOptCheck"+i].name = newID+"_opt"+i;
  11.             dynamic["newOptCheck"+i].id = newID+"_opt"+i;
  12.             dynamic["newOptCheck"+i].value = "Pre-select";
  13.             dynamic["newOptCheck"+i].className = "presel";
  14.             dynamic["newOptCheck"+i].onclick = function() { selectRadio(this.name) };
  16.             document.getElementById(newID+"_optrow"+i).appendChild(dynamic["newOptCheck"+i]);
  17.         }
  18.         var selectedOpt = document.createElement("input");
  19.         selectedOpt.type = "hidden";
  20.         selectedOpt.id = newID+"_selectedOpt";
  21.         selectedOpt.name = newID+"_selectedOpt";
  23.         inputTbody.appendChild(selectedOpt);
  24.     } else {
  25.         var toRemove = document.getElementById(newID+"_selectedOpt");
  26.         toRemove.parentNode.removeChild(toRemove);
  28.         for (i=1;i<=numEls;i++) {
  29.             var removeInput = document.getElementById(newID+"_optrow"+i).childNodes[1];
  30.             removeInput.parentNode.removeChild(removeInput);
  31.         }
  32.     }
  33.     }
'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.
Aug 26 '08 #3
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:
Expand|Select|Wrap|Line Numbers
  1. if (document.all) {
  2.     element =
  3.       document.createElement('< '+type+' name="'+name+'" />');
  4.   } else {
  5.     element = document.createElement(type);
  6.     element.setAttribute('name', name);
  7.   }
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.
Aug 26 '08 #4
16,027 Expert Mod 8TB
Yes, it is more complex. Welcome to IE DOM miseries (unfortunately :()

For the naming while creating elements, you can use something like:
Expand|Select|Wrap|Line Numbers
  1. var createElementWithName = ( function(){
  2.   try {
  3.     var el = document.createElement( '<div name="foo">' );
  4.     if( el.tagName !== 'DIV' || el.name !== 'foo' ){
  5.       throw 'create failed';
  6.     }
  7.     return function( tag, name ){
  8.       return document.createElement( '<' + tag + ' name="' +
  9.         name + '"></' + tag + '>' );
  10.     };
  11.   }catch( e ){
  12.     return function( tag, name ){
  13.       var el = document.createElement( tag );
  14.       el.setAttribute( 'name', name );
  15.       return el;
  16.     };
  17.   }
  18. })();
(courtesy of easy-reader.net).
Aug 26 '08 #5
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 :)
Aug 26 '08 #6
16,027 Expert Mod 8TB
Ok, that's good to hear. Post again if you have more questions.
Aug 26 '08 #7

Sign in to post your reply or Sign up for a free account.

Similar topics

by: Mikael Östberg | last post by:
Hello all! I have been working on a project for some time now and yesterday, my debugger stopped working. It is a class library which I run from a Win32 test app, so no IIS involved at this...
by: Lee | last post by:
Hello All, First of all I would like to say thank you for all of the help I have received here. I have been teaching myself Access for about 4 years now and I've always been able to find a...
by: Gary | last post by:
I am trying to use the "System.Windows.Forms.SendKeys" class for triggering the Ctrl+P key. Syntax: System.Windows.Forms.SendKeys.Send("^(P)"); This is not working ..what could be the...
by: Brian | last post by:
Hello all.. Am working on an Air Hockey game... have an table loaded into a picture box. The borders of the table are slightly slanted. Am using hit testing lines with GDI+ to manipulate the...
by: Jeff Johnson | last post by:
I'm using forms authentication to protect a subfolder within my site. I've got it working fine except for two issues: (1) When I do a RedirectFromLogin page I have to put a cookie path ("/"...
by: Gary | last post by:
Hi, I am trying to use the "System.Windows.Forms.SendKeys" class for triggering the Ctrl+P key. Syntax: System.Windows.Forms.SendKeys.Send("^(P)") This is not working ..what could be the...
by: AussieRules | last post by:
Hi, I want to use the user color scheme to set the color of my forms. I now I have to use the. System.Drawing.SystemColors, but which color is the color of a form background as used in other...
by: harinathch | last post by:
Hi, Iam working with myapplication.exe.config file in my vb.net windows application.Its working fine in my development environment. When i test this application in some other machine using exe and...
by: Michael | last post by:
Hi Everyone, I'm hoping someone out there can give me some guidance. I'm currenlty using VS2005 and the other day the Form Wizzard stopped working. What I mean, is that the wizzard no longer...
by: jas16183 | last post by:
Hi Guys, need some help here, Im working on a project in vb.net, the problem im facing is that my tableadapter.update(dataset.datatable) is not functioning, the datatable has a relation with...
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.