jQuery Nested function variable scoping

The event for focusout isn't added to the input until you click the button: Also, I don't know if it is how you copied and pasted your HTML and Javascript, but it was throwing errors when I put it into a fiddle.

Move this outside of the button click handler as Rory pointed out:

var formname;
$(document).ready(function() {
        //Now focusout handler is added on DOM Ready instead of when you click the button
        $('input#namef').on('focusout', function(){                  
               formname= $('input#namef').val();                         
               console.log(formname);
         });

         $(document).on('click', '#check_out_cart', function(){            

            var scart_add = $("input[name='scart_add']").val();
            console.log("Scart value is "+scart_add);
            console.log("Name is "+formname);

         });
});

Here is a working fiddle: https://jsfiddle.net/hqgv7zsa/

This is a race condition, of sorts.

• On document.ready event, you are setting a click event handler
• Inside the click handler, you are setting the focusout event handler
• Since the click handler is still executing, immediately, the code runs to show value of scart and formname.

At that time, formname is still empty because the current function (click event handler) is still executing, and the focusout event, even if it fires, will fire after that code is executed.

You should move the focusout handler declaration code outside of the click handler code, which will then set both handlers on document.ready() event.

Here's a breakdown of what's happening and when:

var formname; 
$(document).ready(function() {

This fires when DOM is loaded (document.ready event)

    $(document).on('click', '#check_out_cart', function(){            

This fires when user clicks on some element with ID check_out_cart

        $('input#namef').on('focusout', function(){ 

This event handler is only being set once user clicks on cart, but it is not yet executed!

                formname= $('input#namef').val();                         
                console.log(formname);
        });

This code fires once the event handler has been set for focusout, but still has not executed. Even if a focusout event is fired, it will only execute when the current function exits.

        var scart_add = $("input[name='scart_add']").val();
        console.log("Scart value is "+scart_add);

Correctly, you will see that formname is empty at this point.

        console.log("Name is "+formname);
        ...
    });
});

Hope this explains the flow you're seeing;

Quick fix as in Ryan Wilson's answer, move the focusout handler declaration to the scope of the document.ready handler, outside the click handler.

Using the solution from Unable to fetch values from an input element in Bootstrap's popover, I was able to adjust my JS code to fetch the values with a .find within the .popover-content class that was added by the popover JS.

    var formname; 
    var formemail;       
$(document).ready(function() {
          //shopping cart

          /*load functions*/
          load_product();
          load_cart_data();

          $('#cart-popover').popover({
                html : true,
                container: 'body',
                content:function(){                  
                  return $('#popover_content_wrapper').html();
                }
          });

          $(document).on('click', '#cart-popover', function(){    
                  $('input#namef').focus();                   
          });

          $(document).on('focusout', '#namef', function(){
                formname = $('.popover-content').find('#namef').val();                
          });

          $(document).on('focusout', '#emailf', function(){                
                formemail = $('.popover-content').find('#emailf').val();
          });

           $(document).on('click', '#check_out_cart', function(){
                  var scart_add = $("input[name='scart_add']").val();
                  var nameval = $("input#namef").val();
                  alert("Scart value is "+scart_add);
                  alert("Name is "+formname);            
                  alert("Email is "+formemail); 

          });
});