jQuery focus after submit on last input field edited

Question

On jQuery keyup on two IDs a function is executed.

$('#supplier_name').keyup(function(){
    clearTimeout(typingTimer);
    if ($('#supplier_name').val) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
    $.cookie("inputFocus", "#supplier_name"); 
});

After this the form is submitted. I want to do jQuery .focus on the ID which led the keyup function to execute.

So if I entered text into #supplier_name after form submit I want the focus to be on that. Vice versa with #aircraft_type.

EDIT: I am trying to do this via cookies however it doesn't seem to be working.

How do I do this with the following jQuery code:

<script>
$(document).ready(function() {
    $("#state").change(function () {
    this.form.submit();
})
$.cookie("inputFocus").focus();
$("#supplier_name").val($("#supplier_name").val());
$("#aircraft_type").val($("#aircraft_type").val());
var typingTimer;                
var doneTypingInterval = 800;  

$('#supplier_name').keyup(function(){
    clearTimeout(typingTimer);
    if ($('#supplier_name').val) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
    $.cookie("inputFocus", "#supplier_name"); 
});

$('#aircraft_type').keyup(function(){
    clearTimeout(typingTimer);
    if ($('#aircraft_type').val) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
    $.cookie("inputFocus", "#aircraft_type"); });

function doneTyping () {
    $("form").submit();
}

});
</script>

I think you meant $('#supplier_name, #aircraft_type').val to be $(this).val() — Musa
You are actually submitting the form which results in a new page load. It would be easier if you submitted the form contents using an Ajax call. The other way would be to include a hidden form field and setting the id of the field with focus there and reset the focus on page load. But I would really recommend the Ajax solution. — Dehalion
@Dehalion Unfortunately I haven't had any luck working out how to do this from tutorials. I think I would understand it better if someone were to "Ajaxify" a piece of code I create. Would you be up for the challenge? (I could create another question specifically addressing it and linking it to you?) — sephiith
I have now updated the code to reflect my latest efforts. I am attempting to store the ID in a cookie and then focusing on the cookie. However that doesn't seem to be working. — sephiith
$.cookie() returns the cookie value, you have to create a jQuery object to use focus() like this: $($.cookie("inputFocus")).focus(). What errors do you get in the JS console or does nothing happen at all? — Dehalion

sephiith sephiith · Accepted Answer · 2013-01-30T01:53:20

The solution to the above problem was to create an object to use focus() and to add the jQquery cookie plug-in.

The change is below: "$.cookie("inputFocus").focus();" to "$($.cookie("inputFocus")).focus()"

Added the below code to the page: ""

jQuery focus after submit on last input field edited

1 Answers