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 :(

Answer 1

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.