I am using JQuery and JQuery UI. I'm using tabs from the UI part. I'm trying to build a form dynamically adding and removing input elements on the fly. I would expect someone else has tried this before, and that there is an existing implementation somewhere that works.
Here is a page with my example problem: http://www.shelfnet.com/new_tab_form_test/new_tab_form_test.html In my examples I've tried doing this three different ways. The third I know I must be doing something wrong because IE at least dumps an error, and so does FireFox. The first two examples work perfectly in FireFox, but when you add a new tab and it clones the HTML from the first tab IE doesn't cooperate with adding the change event to the new HTML. With Example 1, this was my first attempt and I noticed some odd behavior on IE where the JQuery call to the element's attribute name returns the new value, but if you try and get the .html() from the element it reflects the change to the name element as not having any effect. I'm not sure what is working and what's not. When I submitted the form it seemed to send the changed names... so I'm guessing JQuery might be doing a few things behind the scenes. I thought I'd try changing the name attributes in the HTML before it got added to the DOM, so in Example 2 and 3 I use a regex to modify the name element before the HTML is appended. In the end the affect appears to be good across the board, but it still doesn't trigger the change events on the form elements. In Example 3 I made an ATTEMPT, though unsuccessful, to include an onclick attribute in the actual HTML of the select element to call a javascript function, but I must not be referencing the function name correctly. At least IE triggers it though because it spits out an error.
