Form reset button alters jQuery-UI element

I have a webform to input a contact's physical address that I am styling with jQuery UI. In my application code, I check to see if there is a secondary address line (like Apartment or Suite number), and show or hide a secondary address line accordingly by hiding the element. I also have a jQuery UI "Plus" Button to add an additional line on new or existing forms, which only displays one line by default. The secondary line has a Minus button exactly the same as the Plus button to remove the secondary line if necessary.

If the user clicks on the Plus button, the secondary line appears, a开发者_运维知识库nd the Plus button is set to disabled.

The form also has a standard HTML reset button to reset the form to default values. Everything is working fine with my added javascript, except when there is a secondary address line visible (so the Plus button is set to disabled). If the reset button is clicked when the plus button is disabled, it gets set to enabled, even when there is a secondary street address line visible and it should be disabled.

I've set up a simple form to show this behavior here: jQuery UI Reset Button Form. By default, this form should have the Plus button disabled, and if you click on the reset button, it will become enabled as I've explained.

How do I prevent the HTML form from enabling the button when it shouldn't be?

---

Nice challenge. Reset event 'restores' elements to its initial state, so your add_address_line anchor must start with a disabled attribute.

So your initial markup shoud be this:

<a id="add_address_line" disabled="true" ...></a> 

With this, when the form resets, your a will return to disabled state.

Hope this helps. Please tell me if it doesn't work (it should), I have a B plan hehe.

EDIT: As reset doesn't affect anchors, you can bind the reset event (B plan):

$("#myform").bind('reset', function(){
   setTimeout(function(){  //This is needed
      $("#add_address_line").button("disable");
   }, 10);
});

The setTimeout is necessary for a cross browser solution, because in some browsers, the reset event fires before elements actually reset. With that small delay, it's done.

Cheers

---

Try to use toggle() instead of enabling/disabling the button. Also your js logic is pretty complex, I guess you can implement it with little code instead of bunch of code that you have written inside js functions.

:: UPDATE :: Replace your code :

$('input#reset_button').bind('mouseup', function(event) {
                    if ($('#address_field_two').is(':hidden')) {
                        $('a.address_line_button#add_address_line').click();
                    };
                });

with following :

   $('input#reset_button').bind('mouseup', function(event) {
   var inp = $("#address_entry_address_two").val();
   if(jQuery.trim(inp).length <= 0)
   {
       $('a.address_line_button#remove_address_line').click();
   }});

Here is the working jsFiddle Link.