0

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, and 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?

uxp
  • 3,209
  • 1
  • 15
  • 16
  • Similar to this? http://stackoverflow.com/questions/680241/blank-out-a-form-with-jquery – WSkid May 03 '11 at 05:36
  • I don't think that answer helps my situation, as the reset button works properly on the form as is, unlike the question linked. My problem is with the reset button changing the state of my jQuery UI button when it shouldn't be touching it. Also, I don't want to Blank out my form, I want it reset to default values if editing an existing entry. – uxp May 03 '11 at 06:10

2 Answers2

2

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

Edgar Villegas Alvarado
  • 18,204
  • 2
  • 42
  • 61
  • That doesn't seem to do anything. Is there a way to bind a jQuery event to fire just after the reset event occurs, where I could then reset the state of my jQuery button? – uxp May 03 '11 at 06:39
0

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.

Nirmal
  • 4,789
  • 13
  • 72
  • 114
  • If I use toggle(), the anchor link $('#add_address_line') dissapears, if I understand correctly. All I want to do is set the state to disabled, but still show the button using the .button() setter method, $('a.address_line_button#add_address_line').button('option', 'disabled', true); – uxp May 03 '11 at 06:04
  • Hrm. That only removes the second address field if present, regardless of if it should be removed when the reset button is clicked. I need to keep it visible if there is a value in the input field after the form is reset to the default values. – uxp May 03 '11 at 06:28
  • @uxp : For that you just need to put one simple blank field condition, Check the updated answer... – Nirmal May 03 '11 at 06:35
  • Sorry, that still doesn't work. In my example form, without editing the street address values, your code will still make the Plus button activate when the reset button is clicked. I don't have an issue with the element containing the second address fields showing or hiding, but with the button activating after the reset button is clicked when it shouldn't be active. – uxp May 03 '11 at 06:45