admin管理员组

文章数量:1277885

Goal: User focuses input field. User writes a value in input field. When user is done and the input field isn't in focus anymore, save inserted value to a variable called 'inputFieldValue'. This is should be done invoking the function 'returnInputValue'.

html

<!DOCTYPE html>
<html>
    <head>
        <title>My test</title>  
    </head>
    <body>

        <input class="input" />

        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="test.js"></script>

    </body>
</html>

test.js

function returnInputValue() {

    var inputValue;

    $('.input').blur(function() {   

        inputValue = $('.input').val();

    });

    return inputValue;

}

var inputFieldValue = returnInputValue();

When I call the variable inputFieldValue variable from the console after having inserted a value and focused out again, it is still 'undefined'.

Have I missed something?

Goal: User focuses input field. User writes a value in input field. When user is done and the input field isn't in focus anymore, save inserted value to a variable called 'inputFieldValue'. This is should be done invoking the function 'returnInputValue'.

html

<!DOCTYPE html>
<html>
    <head>
        <title>My test</title>  
    </head>
    <body>

        <input class="input" />

        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="test.js"></script>

    </body>
</html>

test.js

function returnInputValue() {

    var inputValue;

    $('.input').blur(function() {   

        inputValue = $('.input').val();

    });

    return inputValue;

}

var inputFieldValue = returnInputValue();

When I call the variable inputFieldValue variable from the console after having inserted a value and focused out again, it is still 'undefined'.

Have I missed something?

  • javascript
  • jquery
  • events
  • return
  • onblur
Share Improve this question edited Oct 5, 2015 at 9:03 Anders 8,58810 gold badges59 silver badges99 bronze badges asked Sep 19, 2015 at 10:20 Jack ThorJack Thor 631 gold badge1 silver badge3 bronze badges 2
  • try to move var inputValue; outside from function – Sherali Turdiyev Commented Sep 19, 2015 at 10:23
  • Your are doing it wrong. Move the logic into the blur handler. – Ram Commented Sep 19, 2015 at 10:23
Add a ment  | 

4 Answers 4

Reset to default 6

The function you execute is an asynchronous function, i.e., it is based on the time after the input triggers a blur event. You need to either return it inside the blur event:

function returnInputValue() {
    var inputValue;
    $('.input').blur(function() {   
        inputValue = $('.input').val();
        return inputValue;
    });
}

As suggested by some, even above code is not correct. The inputValue doesn't work as it always returns undefined.

Or, set it up to directly access the last blurred value.

var inputValue = "Not Blurred Yet!";
$('.input').blur(function() {   
    inputValue = $('.input').val();
});

function returnInputValue() {
    return inputValue;
}

This is the current logic:

  1. Initialize a variable that has an undefined value.
  2. Bind a handler which is executed at undefined junctures, the variable is still undefined.
  3. Return the undefined value immediately

The above logic is broken and should be rectified. The best option is moving the final logic into the blur handler:

 $('.input').blur(function() {   
    var inputValue = this.value;
    // do something with the value
    // ...
 });

If you need to get the value at a certain juncture, query the DOM, select the element and get it's value.

Try to declare variable outside the function 

    <script>
       var inputValue;
        function returnInputValue() {

        $('.input').blur(function() {   

            inputValue = $('.input').val();

        });

        return inputValue;
   }
    var inputFieldValue = returnInputValue();
    </script>

You could use. 

$(document).on("blur","#Yourinput",function(){
   var Myval = $("#Yourinput").val();
   // Execute your code here I.e call your function 
   // ...
// You do not even have to call you function put
// It in a div to display 
$("#yourdiv").html(Myval);
//Will display it in a div
//Or add to array
Yourarray.push(Myval);
});

This uses jQuery .on() method.

This method is very flexible. If your inserting into a database you can do that here too quite simply with jquery ajax.

You have to play with the events I.e replace blur with another event but if your using jquery this I believe is the simplest method

本文标签： javascriptReturn value from input field with the jQuery blur functionStack Overflow

版权声明：本文标题：javascript - Return value from input field with the jQuery blur function - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741224693a2361635.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。