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>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-2836379775501347"
     data-ad-slot="6894224149"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script><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 the Author

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

Comments

Leave a Reply

avatar
newest oldest most voted
adfhigdfgl
Guest
adfhigdfgl

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

Przemek
Guest
Przemek

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
Guest
sdv

dsvsdv

Pelangsing Asli
Guest
Pelangsing Asli

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

Maria
Guest
Maria

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.

michael
Guest
michael

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
Guest
bushra malik

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

Henry Nwobi
Guest
Henry Nwobi

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

John Collett
Guest
John Collett

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

Szuszar
Guest
Szuszar

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 :)

Nader
Guest
Nader

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.

jaswanth
Guest
jaswanth

Great Tutorial..!!

christine
Guest
christine

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
Guest
Narendra

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
Guest
Dheeraj

Working Perfectly :)

Ashish
Guest
Ashish

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
Guest
ishan

if u r use c# ………

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

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

Dawn Hanson
Guest
Dawn Hanson
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… Read more »
Dawn Hanson
Guest
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?

Suraj
Guest
Suraj

Thank you :)

John
Guest
John

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!

JQueryUser
Guest
JQueryUser

Thank You SOOO Much!

Ivaletta
Guest
Ivaletta

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?

trackback
How to get textbox value with jQuery | jQuery Wisdom

[…] Web Site Demo Share and Enjoy: […]