CODEWITHSUNDEEP
javascripthtmljqueryinputjquery-selectors
Shawn
Shawn

Reputation: 3159

HTML moving from last input field to first

I have a several input fields that look like this

<div class='kary rounded5' id='boarVariables'>
    <span class='bld'>BOAR variables</span><br>
    <div class='klbl'>Number of Boars Tested</div> 
    <input type='text' id='k_nobt'><br>
    <div class='klbl'>AVG sperm/boar/week (lifetime)</div> 
    <input type='text' id='k_asbw'><br>
    <div class='klbl'>Sperm per dose (bil)</div> 
    <input type='text' id='k_spdb'><br>
    <div class='klbl'>Utilization rate</div> 
    <input type='text' id='k_ur'>%<br>  
    <div class='klbl'>Boar productive lifetime (months)</div> 
    <input type='text' id='k_bplm'><br>     
    <hr>
    <div class='klbl'>Doses possible/week:</div>
    <div class='kanswer' id='k_dpw'></div><br>
    <div class='klbl'>Doses actual/week:</div>
    <div class='kanswer' id='k_daw'></div><br>      
    <div class='klbl'>Usable doses/lifetime:</div>
    <div class='kanswer' id='k_udl'></div><br>          
    <div class='klbl'>Sows served/lifetime:</div>
    <div class='kanswer' id='k_ssl'></div><br>      
</div>

I have enter working like tab, and when they press enter it moves to the next input field, and calls a function that does calculations on the input.

    $('#boarVariables input').keypress(function(e) {
        if (e.which == 13) {
            $(this).nextAll('input').first().focus(); 
            e.preventDefault();
        }
    });             
    $('#boarVariables input').blur(function(){
        calcBoarVars();
    });

When I get to the last input field, I can't figure out how to move back to the first field, which would trigger the calculation correctly via blur.

I've tried variations of this (inside of capturing enter) but no luck

$('#boarVariables input:last-child').each(function(){
    var $this = $(this);
    $('#boarVariables input:first').focus();
});

Upvotes: 0

Views: 117

Answers (2)

Su4p
Su4p

Reputation: 865

 $('#boarVariables input').keypress(function(e) {
        if (e.which == 13) {
            if(!!$(this).nextAll('input').first().length){
                $(this).nextAll('input').first().focus();
            }
            else{
               //I can't figure out how to move back to the first field : this is how
                $('#boarVariables input:first').focus();
            }
            e.preventDefault();
        }
    }); 
// which would trigger the calculation correctly via blur : it does.            
$('#boarVariables input').blur(function(){alert("ok");})

DEMO : http://jsfiddle.net/ZURze/

Upvotes: 1

miguel-svq
miguel-svq

Reputation: 2176

Forget about the enter key, just attach the onblur event (or onchange) and use tab key to navigate them... Should work.

You can search tabindex on google and find more info on how to tune it, and select your tab navigation order, (even you could fire focus on the first when onblur on the last to skip the other element).

Upvotes: 0

Related Questions