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

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.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

  • Pingback: do you agree()

  • Pingback: alkaline water()

  • Pingback: car insurance options()

  • Pingback: alkaline water()

  • Pingback: loan payment plan()

  • Pingback: website()

  • Pingback: paypal loans()

  • Pingback: water ionizer()

  • Pingback: pg&e electrician apprenticeship()

  • Pingback: electricians o fallon il()

  • Pingback: house blue()

  • Pingback: pay per day loan plans()

  • Pingback: check this()

  • Pingback: locksmith services albany ga()

  • Pingback: mobile locksmith setup()

  • Pingback: electrical hand tools list()

  • Pingback: h osborne auto electricians()

  • Pingback: parking()

  • Pingback: alkaline water brands()

  • Pingback: water ionizer loan()

  • Pingback: laan penge nu sms()

  • Pingback: parking()

  • Pingback: 3gp mobile porn()

  • Pingback: kangen water machine()

  • Pingback: kangen water()

  • Pingback: alkaline()

  • Pingback: water ionizers()

  • Pingback: free movie downloads()

  • Pingback: watch tv show episodes()

  • Pingback: watch tv show episodes()

  • Pingback: increaseleptin.com()

  • Pingback: Blue Coaster33()

  • John Collett

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

  • 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

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

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

  • http://WWW.SourceIran.com 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.

  • http://www.java4s.com jaswanth

    Great Tutorial..!!

  • 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

    • http://www.mkyong.com mkyong

      Same concept, add onkeyup or onSomeEvents on “name” field.

  • http://www.gmail.com 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

    • http://www.mkyong.com mkyong

      jquery.com

  • http://www.alignmyviews.com Dheeraj

    Working Perfectly :)

  • 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

      if u r use c# ………

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

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

  • 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 way.

    • 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

    Thank you :)

  • 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

    Thank You SOOO Much!

  • 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?

    • http://www.mkyong.com mkyong

      just pass as query parameter

      • MKhan

        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

      • MKhan

        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

  • Pingback: How to get textbox value with jQuery | jQuery Wisdom()