Main Tutorials

How to get textbox value with jQuery

To get the textbox value, you can use the jQuery val() function.

For example,

  1. $(‘input:textbox’).val() – Get textbox value.
  2. $(‘input:textbox’).val(“new text message”) – Set the textbox value.

Textbox example


<html>
<head>
<title>jQuery get textbox value example</title>
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

</head>

<body>

<h1>jQuery get textbox value example</h1>

<h2>TextBox value : <label id="msg"></label></h2>

<div style="padding:16px;">
	TextBox : <input type="textbox" value="Type something"></input>
</div>
	
<button id="Get">Get TextBox Value</button> 
<button id="Set">Set To "ABC"</button> 
<button id="Reset">Reset It</button>

<script type="text/javascript">
    $("button:#Get").click(function () {
		
	$('#msg').html($('input:textbox').val());
		
    });
	
    $("button:#Reset").click(function () {
		
	$('#msg').html("");
	$('input:textbox').val("");
		
    });
	
    $("button:#Set").click(function () {
		
	$('input:textbox').val("ABC");
	$('#msg').html($('input:textbox').val());
		
    });
	
</script>

</body>
</html>

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
31 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Maria
10 years ago

I have multiple question regarding this tutorial.
1. What if I want to set me text box value to int only. If user enters string of some other data type it should display an error message.
2. I don’t understand in which variable the value of text box is being stored, How can access it like this if(‘msg’==0) or what?because I want to pass it to another variable.

adfhigdfgl
6 years ago

overcomplicated example. do not follow it, this code practise is very bad.

michael
11 years ago

thanks for that gr8 tutorial , but i have a little question , that script wont to work without “jquery-1.3.2.min.js”
what was that? i mean could you describe what written into it , please 🙂

bushra malik
9 years ago
Reply to  michael

its a jquery file ……that contain 1000 of jquery function already defind ….we just include this file nd then call any jquery function nd get results

Salman
4 years ago

jQuery get textbox value example

jQuery get textbox value example

TextBox value :

TextBox :

Get TextBox Value
Set To “ABC”
Reset It

$(document).ready(function(){

$(“#Get”).click(function () {

$(‘#msg’).html($(‘#textbox’).val());

});

$(“#Reset”).click(function () {

$(‘#msg’).html(“”);
$(‘#textbox’).val(“”);

});

$(“#Set”).click(function () {

$(‘#textbox’).val(“ABC”);
$(‘#msg’).html($(‘#textbox’).val());
});

});

This Is Modified

Przemek
7 years ago

if the textbox has an id, which it does not in this example, you can use the id and the value property of the textbox without jquery. e.g.: var myvariable=mytextboxid.value; A lot simpler.

sdv
6 years ago
Reply to  Przemek

dsvsdv

John Collett
10 years ago

jQuery didn’t like “textbox”. I had to change it to “text” to get this unit to work.

Szuszar
11 years ago

great tutorial!
i’ve got a question. how can i get the ‘input field results’ as a list? for example i use input 10 times and i get 10 list elements with the results. i want them to reset when refreshing browser of course 🙂

jaswanth
11 years ago

Great Tutorial..!!

Suraj
12 years ago

Thank you 🙂

JQueryUser
12 years ago

Thank You SOOO Much!

Dipak
5 years ago

this is not working code…please share the new code quickly .

Pelangsing Asli
9 years ago

How do i get value from text field other website.
like example i want to get domain validation from go daddy ?
thanks

Nader
11 years ago

GREAT TUTORIAL. very thanks to your article.
i have a question. i write a java script method named “Delete(record)” and i want call a function that write in jquery body in Delete method. plz see the code:

 Delete(record) {  bb(record); );
$(document).ready(function() { function bb(record) {/*Do somethings...*/}; });

but my editor(i use the VS2010)not recognize the bb() method.
i have to do this work. because in master pages in asp.net to get an element must use the JQuery ID selector.
how do this work? and how to define method in jquery body with public accessor?
plz help me.

christine
11 years ago

Could you tell me how I would do the “Get text box value” but without the onclick? Say a user updates their name in a form field, I would like it to be updated in the field displaying their name.

Thanks,
Christine

Narendra
11 years ago

hi sir,plz urgent ..help sir
how to get follwoing source files:-
1)jquery.min.js
2)jquery.validationengine-en.js
3)jquery.validationengine.js

Dheeraj
11 years ago

Working Perfectly 🙂

Dawn Hanson
12 years ago

I have a question – This was a great example for the input textbox to read the value in it – but what if I want to combine that with an if/else statement – so that when the correct value is put in the textbox it would run the conditional statement and if the wrong information was entered it, it would display the else information. I am trying to create a JQuery based testing environment through students having to enter in the correct answer to the textbox and receiving immediate feedback. I would appreciate any help you might send my way.

Dawn Hanson
12 years ago
Reply to  Dawn Hanson

I understood the example – to “get” the value to display somewhere . . . but I was trying to figure out how to take that concept and incorporate it with a conditional statement, if else – so I could create a true multiple choice scenario with their being a “correct” answer the “if” and then “else” options and depending on what they put in the textbox, it would trigger the appropriate response using a conditional statement. Does anyone know how to do that?

John
12 years ago

Hey Mkyong,

Great tutorial!

I have a question.

Is there away to do what you did but have the output be a link?

for example:

if you enter the word “test”
I would like the out put to be

http://mysite/test.pdf

(Actually I got this far, I can make this happen
my problem now is getting it to be a live link)

How do I make it so the output not only displays my URL
but it is a live link as well?

Please let me know if this can be done,

your help will be greatly appreciated!

Thanks!

Ivaletta
12 years ago

Wow, so easy…and almost what I need. Many thanks!
May be you could help me…
I am working on on-line calculator. The result of Calcullate button from step1 should be send to step2 (another html page) and used in further calculation. Is it doable?

MKhan
10 years ago
Reply to  mkyong

I have two box and One button , On Button click I want to copy the value of 1st box, and if I press ctrl+v or Paste option then that value will be pasted on the second box.Will You tell me how to do it without using pluggin .. Thanx in advanse

MKhan
10 years ago
Reply to  mkyong

I have to box and One two button , On click I want to copy the value of 1st box, and if I press ctrl+v or Paste option then that value will be pasted on the second box.Will u tell me how to do it without using pluggin .. Thanx in advanse

Ashish
12 years ago

I have one problem,actually when i click on submit button and show the textbox value to any label,it is appear and automatically disapper.. please tell me why this thing is happening.?

ishan
11 years ago
Reply to  Ashish

if u r use c# ………

u must have a
……………….
……………….
…………….
……………

remove the and only…..but don’t remove other content.

Henry Nwobi
10 years ago

This code doesn’t work when I tried using it, how is it able to work on your site?

MuntainLion
4 years ago
Reply to  Henry Nwobi

I tried that code too, it is not working.

I tried to put code her but it is strpping almost everething except jquery. So if you would like to get that code send me some contact I will send you working code.