Search code examples
javascripthtmljqueryinputjquery-selectors

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();
});

Solution

  •  $('#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/