Develop Reference

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

Two textbox change at same time [JQuery]

I have two textboxes one is type='text' and second is type='hidden'.I want to when something is typed in first textbox to set same value in the second automatically.
I tried something with .change(), but it was not good.
In short: I want same value on both textboxes at sometime [real time]
Do you have some idea how to do it?

Use keyup as below
$("#txt1").on('keyup',function(){
$("#txt2").val($(this).val())
});

Just change event for keyup event,
$("#txt1").keyup(function()
{
$("#txt2").val($(this).val())
});

Try this:
$("#txt1").keyup(function(){
$("#txt2").val($(this).val())
});

You can also use keyup() of JQuery. It is called when user releases a key on the keyboard.
$("#txtbox").keyup(function(){
$("#hiddentextbox").val($(this).val())
});

You can use .keydown():
$("#txt").on("keydown", function(){
$("#hid").val($(this).val());
});
fiddle

Use the input event:
$('#txt1').on('input',function() {
$('txt2').val( this.value );
});

HTML code
input type = "text" size = "40" id = "inputText">
<input type = "text" size = "40" id = "outputText" value = "" readonly>
jQuery script
$(document).ready(function(){
$('#inputText').keyup(function(){
$('#outputText').val($(this).val());
});
});
Hope this would be helpful to you. Thank you for the useful question.

use .blur as :-
$("#txt1").blur(function(){
$("#txt2").val($(this).val())
});
OR
$("#txt1").keyup(function(){
$("#txt2").val($(this).val())
});

jQuery change value of input and display it as text

I'm struggling with the following problem. I have input text element. I want a user to enter something there and then his value appears as a normal text (the input should disappear).
I searched for a few solutions but nothing worked for me. What I tried (whatever function I provide, I get no results, what should I provide to get the effect I described above and how to make it happen?):
$('input.modified').on('input', function(){
(this).append('<p>some</p>');
});
OR
$("input.modified").bind("propertychange change keyup paste input", function(){
$(this).append("<p>dgdgd</p>");
});
OR
$("input.modified").change(function(){
$(this).css("visibility","hidden");
}); //end change function
How to make functions like .on() or .change() work with my code?
thanks for all the answer, but I can't move your examples to my code :(
Please verify this fiddle what I'm missing:
[http://jsfiddle.net/w6242/][1]

Check this DEMO
HTML:
<input class="modified" type="text"/>
<p></p>
JS:
$("input.modified").change(function(){
$('p').html($(this).val());
$(this).css("visibility","hidden");
});

check this
Fiddle
$("#in").focusout(function(e){
$("span").html(($("#in").val()));
$(this).hide();
});

Here a fiddle http://jsfiddle.net/keypaul/NsWC5/5/
HTML
<div id="wrapper">
<input type="text" id="writer" />
send
</div>
JQuery
$("#submit").click(function(e){
var txt = $("#writer").val();
$("#writer").fadeOut(400);
$("#submit").fadeOut(400, function(){
$("#wrapper").append('<div id="text">' + txt + '</div>').hide().fadeIn(600);
});
e.preventDefault();
});
If you need to do that with onther event (instead of a click submit) you can use onchange or focusout applied to your input element

At its simplest, assuming you really want to replace the input:
$('#demo').on('keyup', function(e){
if (e.which === 13) {
var p = $('<p />', {
text : this.value
});
$(this).replaceWith(p);
}
});
JS Fiddle demo.
Or, to insert an adjacent element and simply hide the input:
$('#demo').on('keyup', function(e){
if (e.which === 13) {
var span = $('<span />', {
text : this.value
});
$(this).hide().after(span);
}
});
JS Fiddle demo.
The above jQuery works with the following demonstrative HTML:
<input id="demo" type="text" />
References:
after().
hide().
on().
replaceWith().

HTML5 color pick change span color

I'm making a form where you can preview the result. I've made this:
HTML:
<input type="color" id="color" />
<span id="colorchange">Foo</span>
JS:
$(document).ready(function() {
$("#color").click(function() {
var color= $(this).attr('val'); // Not sure about this
$("#colorchange").css("color","+color+");
});
});
Which didn't work. Any ideas?
Thanks!
Edit: jsfiddle here: http://jsfiddle.net/xgm34/
New edit

Use the change event in jQuery:
$("#color").on('change', function() {
$("#colorchange").css({"color":$(this).val()});
});
http://jsfiddle.net/j27Bu/

use this code -
$(document).ready(function() {
$("#color").change(function() {
var color = $(this).val();
$("#colorchange").css("color", color);
});
});
see this fiddle - http://jsfiddle.net/xgm34/10/

using on keyup it will change the color while typing.
$("#color").on('keyup',function() {
$("#colorchange").css({"color":$(this).val()});
});
http://jsfiddle.net/tamilmani/j27Bu/1/

You forgot to close some braces and parentheses
$(document).ready(function() {
$("#color").click(function() {
$("#colorchange").css("color","+color+");
});
});
By the way:
The color type in input doesn't exist
dont forget to close yout input element />

How to select value of input onClick?

I have a <input type="text"> and if user clicks inside it I want to make the content (value) of that box selected. How would I do that?

<input type="text" onclick="select()"/>

Try select method:
document.getElementById("myinput").onclick = function() {
this.select();
};

You can try following code inside a javaScript method, and call the method onClick event of the textbox...
function calledOnClick(){
document.getElementById('test').select();
}

You can try following jQuery code which automatically call on page load
<script>
$(document).ready(function(){
$('input').each(function(){
$(this).click(function() {
this.select();
});
});
$("#return_date").focus();
});
</script>