Passing a value from one event listener to another

JavaScript
1

The html part:


<div id='data'></div>
        
        <form action="">
            <input id="nomeInput" type="text" name="nomeInput" value="" autocomplete="false"/>
        </form>

The js part:


$(document).ready(function(){
   //add an event handler, on blur, execute all this function:

   $('#nomeInput').keypress(function(){
   $.post("testeBasico_1.php", {nomeInput : $('#nomeInput').val()}, function(resposta) {
for (var x = 0, tamanhoDados = resposta.dados.length; x < tamanhoDados; x++){
$('#data').append(resposta.dados[x]+'<br>');
}
$('#data').append('<br />'+resposta.venhoDoInput);
}, "json");
});//end of keypress;


$('#nomeInput').blur(function(){
    alert('here, I would like to grab the value we see on the input field at this precise moment.');
            });
	});

The server side (php) part:


$response = (object) array(
    'success' => TRUE,
    'dados'       => array("venhoDoServerSide1", "venhoDoServerSide2", "venhoDoServerSide3"),
    'venhoDoInput' => $_POST['nomeInput']
);
echo json_encode($response);

This is the entry point for doing an autocomplete, but for know, I would just like to ask:

What should we do so that, the text that is typed, appears on that alert box?

Thanks in advance,
Márcio

2 
alert($(this).val())
3

http://www.quirksmode.org/js/events_tradmod.html
onblur is fired when a change of focus is detected.

4

Ok…

If $(this) is a reference of an object firing some event, am wondering: can we still have $(this) when no event is in place?

So, since blur is an event listener. What does it listen? “the move out from an element”. Is that anonymous function, a event handler? Like something that will do something after the even as been listen?

5

$(this) is a reference to the object firing the onblur, #nomeInput.

Inside blur is an anonymous function. blur is the event listener.

It’s equivalent to the JavaScript:

document.getElementById('nomeInput').onblur = function() {alert(this.value;)};
6

Thanks a lot.

So, “this” means “this element” ?
(I’m sure it isn’t that simple…)

When we use the code suggested,


$('#nomeInput').blur(function(){
alert($(this).val())
});

We are telling, alert with the #nomeInput value ;

So, actually we are not passing anything. We are just reading the element value again yes?

When we see

blur(function(){
alert($(this).val())
});

is the function inside blur an event listener?

Thanks a lot,
Márcio

7

Thanks for the additional info. :slight_smile:
I will follow the path from here. :slight_smile:

K. Regards,
Márcio