24156

Disabling and Re-Enabling Dynamic Form Elements with JQuery

Question:

It's probably easiest to view this fiddle: <a href="http://jsfiddle.net/Ahfm7/4/" rel="nofollow">http://jsfiddle.net/Ahfm7/4/</a>

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.

<ul><li>

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.

</li> <li>

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

</li> </ul>

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

Answer1:

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.

<a href="http://jsfiddle.net/mattball/5ubTe/" rel="nofollow">http://jsfiddle.net/mattball/5ubTe/</a>

In general:

<ul><li>Avoid re-querying the DOM by caching jQuery objects</li> <li>Stay <a href="http://en.wikipedia.org/wiki/Don%27t_repeat_yourself" rel="nofollow">DRY</a> by writing more, smaller functions which contain commonly reused logic (such as the enableSubmitButton function I added)</li> <li>Don't forget to use var</li> </ul>

Answer2:

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

<a href="http://jsfiddle.net/5ubTe/72/" rel="nofollow">http://jsfiddle.net/5ubTe/72/</a>

Thanks for your advice.

Recommend

  • How can a dropdown be stylized when using twitter bootstrap with simple_form in a Rails app?
  • Stop dropdown from redirecting to homepage
  • Dropdowns with 10 thousand possible values and sequence-important dropdowns vs. graceful degredation
  • Using JQuery Datepicker To Only Show Months
  • IllegalArgumentException caught when parsing URL with JSON String
  • Listen to the 'change' even of an element in the shadow DOM
  • Notepad++ - delete all lines with certain text
  • mail server requires authentication when attempting to send to a non-local e-mail address when using
  • BizTalk Party not being resolved for incoming HL7v2 message
  • HTML checkbox form and HTTP URL
  • The symbol you provided is not a function
  • IE11 textarea loses focus if another textarea is disabled
  • change color of jstree node
  • How can I reset dropdown data if modal closed on vue component?
  • How do you create a Fuseki SPARQL server using the Apache Jena Java API?
  • joining two bezier curves
  • How to getText() from the input field of an angularjs Application
  • ViewController With Transparent Background Entering Current ViewController With Push Transition
  • How do I access an unhandled exception in an MVC Error view?
  • WPF - CanExecute dosn't fire when raising Commands from a UserControl
  • Google Custom Search with transparent background
  • jQuery show() function is not executed in Safari if submit handler returns true
  • vba code to select only visible cells in specific column except heading
  • ORA-29908: missing primary invocation for ancillary operator
  • jQuery tmpl and DataLink beta
  • How to get next/previous record number?
  • Unanticipated behavior
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • SQL merge duplicate rows and join values that are different
  • Proper way to use connect-multiparty with express.js?
  • How to set the response of a form post action to a iframe source?
  • How do you join a server to an Active Directory (domain)?
  • Angular 2 constructor injection vs direct access
  • Java static initializers and reflection
  • Android Google Maps API OnLocationChanged only called once
  • How does Linux kernel interrupt the application?
  • Can't mass-assign protected attributes when import data from csv file
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • To Get the radio button value in ruby on rails