Autofocus After reload function on different fields

Question

I have a form for example: Country1 - State1 - City1 - (all three are drop-downs)

These are 3 different fields having unique ID, I can add more row & that will give me Country2 - State2 - City2

If I select country, I am reloading the page to load list of states under state1 (or the state2 one) drop-down and so on.. (done by jquery). Now, I want that when-ever I am selecting country1 or 2, after reloading the page it should focus on state1 or 2 or at-least on country1 or 2 respectively.

I dont know, whether this is possible or not.. but I need this :(

You're reloading the page or using AJAX to load parts of the page? — tdlm, Sep 24 '12 at 06:06
You'd need to retain the values of the selected dropdown by using local storage or cookie/session etc. or alternatively you can prevent page reload and process further tasks using ajax. — Vishal, Sep 24 '12 at 06:06
You can store country id or state id in a hidden field, and in javascript check the id in hidden field and focus your control. — Yograj Gupta, Sep 24 '12 at 06:09
I couldn't track what you are suggesting Vishal.. @YograjGupta: I will try your's idea — Anusha, Sep 24 '12 at 06:14
Ah! couldn't resist. But, how are you gonna retain the values in hidden field on page reload..? That's not possible anyway unless you're using session or local storage ;) or using ajax!! — Vishal, Sep 24 '12 at 06:21

automaticAllDramatic · Accepted Answer · 2012-09-24T07:09:22.677

I would suggest you reload parts of the page using AJAX. Reloading the entire page is wasting resources both server side and client side. When you have already loaded the DOM, it makes sense to only refresh parts that you want to get from the server.

Using jQuery you can conjure up something like:

$.ajax({
    url: 'http://somedomain.tld/your_script_url',
    data: {
        country:$('#country_input').val(),
    },
    dataType:'json',
    type:'POST'
});

The URL should return either text OR HTML OR JSON. You should modify the value for dataType based on what you are returning.

Also, the type should be either GET OR POST.

You can use $("#your_id").focus(); to focus on an element.

This will not only save you a lot of processing on the server side, but also help you write a common function to perform this task for every select element on the page.

You can use $("#your_id").focus(); to focus on an element. – automaticAllDramatic Sep 24 '12 at 07:09 — automaticAllDramatic, Sep 24 '12 at 07:09

Autofocus After reload function on different fields

1 Answers1