Disabling and Re-Enabling Dynamic Form Elements wi

Question

It's probably easiest to view this fiddle: http://jsfiddle.net/Ahfm7/4/

Only the agent and extension values in the dropdown have been implemented at this time.

I have encountered a couple of bugs I was hoping someone could help figure out.

• The first is when you add a new row of dropdowns without selecting anything in the first and proceed to select an option in the second one, the form can be submitted.

• Likewise if you pick an option in the first row, then add another and remove it, the submit button remains disabled.

I was just wondering if anyone knows how to fix this?

Answer 1

I finally almost have a complete working solution but with one bug:

http://jsfiddle.net/5ubTe/72/

Thanks for your advice.

Answer 2

I started cleaning up the code. I cut the 700+ lines of JS down to something more manageable for SO, but you should be able to understand the general idea.

http://jsfiddle.net/mattball/5ubTe/

In general:

• Avoid re-querying the DOM by caching jQuery objects
• Stay DRY by writing more, smaller functions which contain commonly reused logic (such as the enableSubmitButton function I added)
• Don't forget to use var