I am unable to capture the value typed by a user in the textbox into a variable.
I do not want to use <form>, is there any other way to do this?
<html>
<head>
<style>
p { color:blue; margin:8px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" id="txt_name" />
<script type="text/javascript">
value = $("#txt_name").val();
$("#dom_element").text(value);
</script>
</body>
</html>
If you want to get a value that the user types then you need to do so in response to some kind of event. The keyup event occurs (believe it or not) when a user is typing and releases a key. If you trap keyup you can update your variable with every keystroke but you should trap "change" as well to allow for paste and drag'n'drop changes that don't use the keyboard. The "change" event occurs when the user modifies the field and then clicks or tabs out of it.
Also, at the moment your value variable is global, but if all you are using it for is to set the value of another field you don't need it at all:
$("#txt_name").on("keyup change", function() {
$("#dom_element").text(this.value);
});
// OR, if you need the variable for some other reason:
$("#txt_name").on("keyup change", function() {
var value = this.value; // omit "var" to make it global
$("#dom_element").text(value);
});
Note that within the event handler function this will be the dom element so you can and should get its value directly without jQuery.
If you're using an old version of jQuery use .bind() instead of .on().
Do you mean like this?
Script:
jQuery(function(){
$("#txt_name").keypress(function() {
var value = $("#txt_name").val();
$("#myDiv").text(value);
});
});
HTML:
<form>
<fieldset>
<input id="txt_name" type="text" value="Hello World" />
</fieldset>
</form>
<div id="myDiv"></div>
I hope that helps you.
<script>
$('#txt_name').keyup(function(){
value = $("#txt_name").val();
$("#dom_element").val(value);
});
</script>
this is from api.jquery.com :
The .text() method cannot be used on form inputs or scripts. To set or get the text value of input or textarea elements, use the .val() method. To get the value of a script element, use the .html() method.
As of jQuery 1.4, the .text() method returns the value of text and CDATA nodes as well as element nodes.
