HTML anchor and JS focus not working together
Hi,
I have a form in which there are 2 dropdowns for Country and State respectively (in the middle of the form). When I select a value from the Country dropdown the page refreshes and loads the State dropdown with the relevant state names. I want the page to remain in the same place where it was before refreshing the page (ie., I dont want the page to go to the top after refreshing) and also I want the focus to be on the State dropdown after refershing. For this I created a HTML anchor as below
<a name="cntrystateanchor" />
<div>
<select class="small3 formfieldwidth2" name="countryDDList" id="countryDDList" onchange="javascript:getStates();">
<option value="" selected >- Please Select -</option>
<% Iterator keys= countrylist.keySet().iterator();
while(keys.hasNext() ){
........... <% } %>
</select>
</div>
When the page is done with refreshing I am doing the following
document.registrationForm.stateDDlist.focus();
document.location = "#cntrystateanchor";
My page is staying at the same place after refreshing but the focus is not getting set to the 'States' dropdown. If I remove the "document.location = "#cntrystateanchor";" the focus is getting set correctly to the 'States' dropdown but as expected the page is going to the top after refreshing (as I removed the document.location).
Can someone please help me with this.
Thanks,
Sudhir
|