dynamically renaming form elements with JavaScript

Question

I have a table inside a form, which is populated with various input boxes. I have written various JavaScript functions that will allow the user to add or remove a row from the table, and will also dynamically rename the element names that come after where the user has entered the row (if that makes sense - hopefully my code will explain what I'm trying to do).

This works in IE9, Firefox and Chrome, but not in IE7 (which a lot of people in my organization who are still on XP currently use).

The code isn't the most elegant thing I've ever written, but I need to fix this before demoing it in front of people tomorrow! (So I'm willing to consider anything, even if it's a quick and dirty fix at this point!)

Thanks!

for (var e = 0; e < editForm.elements.length; e++) {
    // Increment 'add row' buttons so that they add underneath the correct row
    if (editForm.elements[e].name.length >= 4) {
        if (editForm.elements[e].name.substr(0, 4) == 'add_') {
            stringPos = editForm.elements[e].name.indexOf('_');
            currentQuestionNumber = editForm.elements[e].name.substr(stringPos + 1);
            if (currentQuestionNumber > pos) {
                editForm.elements[e].name = 'add_' + (parseInt(currentQuestionNumber) + 1);
                editForm.elements[e].id = 'add_' + (parseInt(currentQuestionNumber) + 1);
                editForm.elements[e].setAttribute("onclick", "addRow(" + (parseInt(currentQuestionNumber) + 1) + ");");
            }
        }
    }

In place of...

editForm.elements[e].name = 'add_' + (parseInt(currentQuestionNumber) + 1);

...I have also used...

editForm.elements[e].setAttribute("name", "add_" + (parseInt(currentQuestionNumber) + 1));

...but this doesn't work in IE7 either. Any help appreciated.

What about leaving the names alone and compiling them as an array server side, à la PHP's form handling? I've done this myself by formatting the submitted data as XML before submission. — outis
– outis, Commented Sep 15, 2011 at 8:01
You don't need both if's, since the second condition can only be true if the first is as well, making the first redundant. I'm surprised this worked at all cross-browser, since you're setting the click event using setAttribute which doesn't work in all IE versions. Maybe just have a "global" counter that increments on every row addition, then you won't have to do all this inline string parsing... — davin
– davin, Commented Sep 15, 2011 at 8:11
Can we just set an embargo on get/set/removeAttribute? They're more trouble than they're worth. — user1385191
– user1385191, Commented Sep 16, 2011 at 16:36

Community · Accepted Answer · 2017-05-23 12:29:09Z

0

In case the elements you're changing names have been dynamically created, you may be hitting an IE6/7 bug. There's a pointer to a possible workaround to the setAttribute bug on the Web Bug Track blog. You may also find the answers to "Changing name attr of cloned input element in jQuery doesn't work in IE6/7" useful.

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Sep 15, 2011 at 8:24

Xavi López

27.9k11 gold badges100 silver badges167 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

dynamically renaming form elements with JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related