On typing/entering data in text box getting the entered value to display

Question

I have a text box, after entering which i need to get that value and display in alert box,without using any forms or buttons.

This is what I used: But its not working ,it gives null value on loading of the file.

HTML

<tr>
    <td><br>Address of Patient</td>
    <td> <br> <input type="text" name="inc_patientAddress" id="inc_address" required></td>
</tr>

Jvascript

<script type="text/javascript">
var x = document.getElementById('inc_address');
alert(x.value);
</script>

I want to display the text box value after entering the data in text box , Is it possible? Please help

Answer 1

Use blur event:

document.getElementById('inc_address').addEventListener('blur', function() {
    console.log(this.value);
}, false);

Demo: http://jsfiddle.net/tusharj/hop3szu4/

Docs: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Answer 2

Try this

For every input

$('#inc_address').on('input', function() {
alert($(this).val());
});

Working Fiddle Here

For every complete Input

$('#inc_address').on('change', function() {
alert($(this).val());
});

Working Fiddle Here

Answer 3

You need to add blur function for that input. As soon as it will lost focus from that text box it will call this function and so the alert will be displayed.

<input type="text" name="inc_patientAddress" id="inc_address" onblur="myFunction()" required>

Call this funtion on blur:

myFunction(){
      alert("#inc_address").value();
}