Question

I have a DIV that slideToggles no problem. It reveals some additional options to the visitor. Once the form is submit, if for example an error is encountered the visitor presses their browser back button to rectify. The div with all the additional options is not in the state is was last left, rather it is collapsed. Any ideas how I can prevent this?

    $("#sendChange").click(function () {
                          $("#sendSpec").slideToggle("slow");
                        if($('#sendWhen').html() == 'IMMEDIATLY'){
                           $('#sendWhen').html('AS SPECIFIED');
                        }else{
                           $('#sendWhen').html('IMMEDIATLY');
                        }
                        return false;
});




<div class="fcenter stdBox line25" style="margin-bottom:0px;" id="emlOptions">
<div>
     <label class="lab">Send email: </label><span id="sendWhen" class="blue">IMMEDIATLY</span> <a href="#" id="sendChange">[change]</a>
</div>
<div style="display:none" id="sendSpec">
    <label for="userTz" class="lab">Timezone: </label><select name="userTz" id="userTz" onchange="tzChange(this.value)" class="field" >
<option value="Pacific/Apia">(GMT-11:00) Midway Island, Samoa</option>
<option value="Pacific/Honolulu">(GMT-10:00) Hawaii</option>
...
</select>  <br />

<label for="delayTimeDate" class="lab">Time & Date: </label><input type="text" class="field" name="delayTimeDate" id="datepicker" />
<br /><br />
</div>

So I tried adding a hidden text field which worked in FF but not Opera. Opera forgets the hidden field values but not text field ones so I wrapped the text field in a display:none div which remembers the value ok but javascript fires before the formfield has its value updated by the Opera browser. Here is the code:

function sendSpec () {
                          $("#sendSpec").slideToggle("slow");
                        if($('#sendWhen').html() == 'IMMEDIATLY'){
                           $('#sendWhen').html('AS SPECIFIED');
                           $('#sendWhenState').val('1');
                        }else{
                           $('#sendWhen').html('IMMEDIATLY');
                           $('#sendWhenState').val('0');
                        }}

$("#sendChange").click(function () {
                     sendSpec();
                    return false;
});
if($('#sendWhenState').val() == 1){
    sendSpec();
}

HTML is the same but with the added formfield

<div style="display:none"><input type="text" id="sendWhenState" value="0" /></div>

I don’t like this but couldn’t find another way. the above is the same just added a timeout to the if sendWhenState == 1 so that Opera will have updated the fields before I check their value like so:

setTimeout(function(){
                    if($('#sendWhenState').val() == 1){
                       sendSpec();
                    }
         },1000);

I’m new here, should I have answered my own question or was I right to edit the question with the solution I came up with?

Answer 1

I added a hidden text field which worked in FF but not Opera. Opera forgets the hidden field values but not text field ones so I wrapped the text field in a display:none div which remembers the value ok but javascript fires before the formfield has its value updated by the Opera browser. Here is the code:

function sendSpec () {
                          $("#sendSpec").slideToggle("slow");
                        if($('#sendWhen').html() == 'IMMEDIATLY'){
                           $('#sendWhen').html('AS SPECIFIED');
                           $('#sendWhenState').val('1');
                        }else{
                           $('#sendWhen').html('IMMEDIATLY');
                           $('#sendWhenState').val('0');
                        }}

$("#sendChange").click(function () {
                     sendSpec();
                    return false;
});
if($('#sendWhenState').val() == 1){
    sendSpec();
}

HTML is the same but with the added formfield

<div style="display:none"><input type="text" id="sendWhenState" value="0" /></div>

I don’t like this but couldn’t find another way. the above is the same just added a timeout to the if sendWhenState == 1 so that Opera will have updated the fields before I check their value like so:

setTimeout(function(){
                    if($('#sendWhenState').val() == 1){
                       sendSpec();
                    }
         },1000);