javascripthtmlformsshopping-cartliquid

What is jQuery focus() Method doing in this code?


I want to know if the line below is needed in this script, and if so, what purpose it serves.

$("#quantity-0").focus(); 

If I do not have a form field with id "quantity-0" what other elements could I focus (if required)? Can I focus a hidden form element?

Here's my code. It comes from this blog.

<script type="text/javascript" charset="utf-8">
//<![CDATA[
// Including jQuery conditionally.
if (typeof jQuery === 'undefined') {
    document.write({{ "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" | script_tag | json }});
    document.write('<script type="text/javascript">jQuery.noConflict();<\/script>');
}
//]]>
</script>

<script>

$(document).ready(function () {
    $("#quantity-0").focus();    
    var length = $("#linklist-length").val();
    $("#submit-table").click(function(e) {     
        e.preventDefault();
        //array for Variant Titles
        var toAdd = new Array();
        var qty;
        for(i=0; i < length; i++){
        
            toAdd.push({
                variant_id: $("#variant-"+i).val(),        
                quantity_id: $("#quantity-"+i).val() || 0
            });
        }
        function moveAlong(){
            if (toAdd.length) {
                var request = toAdd.shift();
                var tempId= request.variant_id;
                var tempQty = request.quantity_id;
                var params = {
                    type: 'POST',
                    url: '/cart/add.js',
                    data: 'quantity='+tempQty+'&id='+tempId,
                    dataType: 'json',
                    success: function(line_item) { 
                        //console.log("success!");
                        moveAlong();

                    },
                    error: function() {
                        //console.log("fail");
                        moveAlong();
                        
                    }
                };
                $.ajax(params);
            }
            else {              
                document.location.href = '/cart';
            }  
        };
        moveAlong();
    });
});

</script>

Solution

  • I want to know if the line below is needed in this script, and if so, what purpose it serves.

    Calling the jQuery .focus() method with no arguments sets focus to the specified element. That line is the first line inside the document ready handler. So its purpose is to set focus to that particular field when the page first opens/loads.

    As to whether it is needed, that's really up to the page designer. Setting focus to the field the user will most likely want to interact with first is generally helpful to them. If you didn't have that it wouldn't stop the page from working or anything.

    If I do not have a form field with id "quantity-0" what other elements could I focus (if required)?

    You can set focus to whatever element you like. Normally this would be either a form element of some kind (input, button, etc.) or a hyperlink. Whichever one makes most sense for a user to interact with first upon page load.

    Can I focus a hidden form element?

    Why would you want to do that? It doesn't make sense for a user to interact with a hidden element. I believe attempting to set focus to a hidden element may give an error in some browsers.