Prevent radio toggler from being checked on page refresh
Hello,
I have long forms containing a radio group like this one:
<fieldset id="ctrl_4139" class="radio_container mandatory">
<legend>How many locations?<span class="mandatory">*</span></legend>
<input name="locations" value="one_location" required="" type="radio">
<label>One location</label>
<input name="locations" value="several_locations" required="" type="radio">
<label>More than one location</label>
</fieldset>
<div id="several_locations" class="addForm2" style="display:none;">
...
</div>
My snippet:
jQuery(document).ready(function () {
jQuery("input:radio[name='locations']").change(function () {
jQuery('.addForm2').slideUp();
jQuery('#' + jQuery("input:radio[name='locations']:checked").val()).slideDown();
});
});
This works fine so far, i.e.
– both radios are unchecked on page load,
– additional text fields are displayed if option 2 is checked and
– checking option 1 will hide the additional fields again.
The problem is: If the form is submitted with empty mandatory fields, then the second option is checked when the page reloads with error messages (without showing the hidden div, though).
I'm still a jQuery rookie but logic tells me that if the script hasn't been triggered by checking one of the radio buttons it will be by hitting the submit button.
How can I prevent this? I'd very much appreciate your help.