Develop Reference

JavaScript copy Input value to innerHTML on keyup (addEventListener)

As the title says: I want to copy the input value to an html element (in realtime). I've tried something like this, but it's not working... THX in advance!
<input type="text" id="test" value="">
<p id="box"></p>
<script type="text/javascript">
document.getElementById('test').addEventListener('keyup', function () {
document.getElementById('box').innerhtml = document.getElementById('test').value;
});
</script>

Like Geuis said (post comment), your mistake is innerHTML (and not innerhtml), see : https://codesandbox.io/s/724r405wo1
I would encourage you to change your code to :
var box = document.getElementById('box')
document.getElementById('test').addEventListener('keyup', function (event) {
box.innerHTML = event.target.value
});
So you do not query the dom every time.

You must use the input value to get instant input. Like :
document.getElementById('input').addEventListener('input', (e) => {
document.getElementById('box').innerHTML = e.target.value
})

How to get the value of the text box using jQuery on keypress

I want a functionality that i will type some text on the textbox and the value will be picked up by the jquery and will be stored in some variable ,how to achieve that? i am using jquery bind function but it is not suiting my purpose .
This is my textbox
<aui:input inlineField="true" label="" name="interviewCC" id="interviewCC" size="45" value=""></aui:input>
and i am using this jQuery function
$("#interviewCC").bind("click", function () {
value = $("#interviewCC").val();
alert(value)
});
but it is not picking the value i want that when i will type something on the textbox that value will be picked up.Please somebody help.

The problem is that you listen to the 'click' event and not the 'keypress' event.
Try this:
$('#interviewCC').keypress( function(e) {
var value = $("#interviewCC").val();
alert(value)
});

Use
$("#interviewCC").keypress(function () {
value = $("#interviewCC").val();
alert(value);
});

You can use the jQuery function .keyup() which will figure out when a key has been pressed and then the press has finished.
$(document).ready(function() {
$('input#text').keyup(function() {
$('.output').text($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="text" type="text" />
<div class="output"></div>
.keyup() Documentation

I want to get all textbox values using jquery and make them all null on onchange event

I'm trying to get all values within a form using jQuery
and want to set all those as a value null.
Now I have text also and hidden fields also.
<input id="MYNAME_04cd1197-7147-4b82-9b0a-c44846405150"
type="text"
value="MyName"/>
<input id="MYID_12cd1112-7147-4b82-9b12-c412846125112"
type="hidden"
value="f208b514-133b-4d6d-8299-f5f002e131a0"/>
There are many textboxes like this.
May I know what is the syntax to get all these textboxes and set null as value to [type="text]"
and 00000000-0000-0000-0000-000000000000 to [type=hidden] inputs.
I tried something like:
function resetAllValues() {
debugger;
$('#TransactionGrid').find("input:text").each(function (index) { });
}

You can do something like this:
$('form > input').val('');
But this everyone will tell to you in different ways.
What you should know is:
Your html element must have the attribute NAME, if you want to get all the values from the form(as you commented). You can't use $('#frm1').serialize() for example.

try this:
$('#TransactionGrid').find("input[type='text']").each(function (index) {
//get value
var val = $(this).val();
//set this value to ''
$(this).val('');
//to hide
$(this).hide();
});

$('#TransactionGrid').find("input[type=\'text\']").each(function (index) {
//Setting the value to null i.e '';
$(this).val('');
//if u want to hide it u can use .hide...
$(this).hide();
});

Try with this
function resetAllValues() {
$("input:text", "#TransactionGrid").val('');
$("input:hidden", "#TransactionGrid").val('00000000-0000-0000-0000-000000000000');
}

onchange text of textbox display on another textbox

I want to display changing text into another text box
I tried here for evey possible combination. But didn't work.
/*$('input#list_val').keyup(function() {
//perform ajax call...
// alert("Hello");
$('#list_v').text($(this).val());
});*/
$('input#list_val').keydown(function() {
//perform ajax call...
//alert("Hello");
$('#list_v').text($(this).val());
});
<input type='text' id="list_val" />
<input type='text' id="list_v" />

It should be val() for adding value to input and use keyup rather than keydown to show value in other input immediately
$('input#list_val').keyup(function() {
$('#list_v').val($(this).val());
});
Demo Fiddle

use .val() and .keyup (using keydown doesn't register the newest value, it registers the value before so keyup is better to use for this)
$('#list_val').keyup(function() {
$('#list_v').val(this.value);
});
DEMO

change from :
$('#list_v').text($(this).val());
to:
$('#list_v').val($(this).val());

var $list_v = $('#list_v');
$('input#list_val').keyup(function() {
$list_v.val($(this).val());
});
Demo: Fiddle

Try This
js
$('#list_val').keyup(function() {
$('#list_v').val($('#list_val').val());
});
Demo

Try this:
$('input#list_val').keydown(function() {
var text = $("input#list_val").val();
$('#list_v').html(text);
});

Your code is perfect, Just need to change small things in your code :
$('#list_val').keydown(function() {
$('#list_v').val($(this).val());
});

Javascript - get value from textbox at every keypress

I have a textbox and I want to use the data in it every time something is entered; letter by letter.
What is happening is that when a value is entered, the Javascript is being executed before the value is actually put into the textbox, meaning that it always lags one character behind.
$(document).ready(
function() {
$('#test').keypress(
function() {
var value = document.getElementById('test').value;
alert(value);
});
})
<input id="test" type="text" />
Here's whats happening:
input alert
w ""
e "w"
a "we"
l "wea"
t "weal"
h "wealt"
Whereas I want it to happen dynamically; i.e. when I enter "w" I want the alert to contain "w" immediately after.

keypress happens before the change, yes. keyup happens after. Listen to that instead.

use keyup
$(document).ready(
function() {
$('#test').keyup(
function() {
var value = document.getElementById('test').value;
alert(value);
});
})

You should try keyup event, because keypress happens before symbol is being input in a textbox

Use keyup to read the valid after something has been entered. Here's how to do it with jQuery:
$(document).ready(function() {
$('#test').keyup(function() {
alert($(this).val());
});
});
Demo

Use the keyup event instead -:
$('#test').keyup(
function() {
var value = document.getElementById('test').value;
alert(value);
});

Use keyup instead, take a look at this:
http://jsfiddle.net/gEBc4/1/

use keyup instead
that will work
$(document).ready(
function() {
$('#test').keyup(
function() {
var value = document.getElementById('test').value;
alert(value);
});
})

Try using 'keyup' event instead of 'keypress'.
Change to:
$(document).ready(
function() {
$('#test').keyup(
function() {
var value = document.getElementById('test').value;
alert(value);
});
});
Working plunk.