How to get textbox value with jQuery
To get the textbox value, you can use the jQuery val() function.
For example,
- $(‘input:textbox’).val() – Get textbox value.
- $(‘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>
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.
overcomplicated example. do not follow it, this code practise is very bad.
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 🙂
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
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
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.
dsvsdv
jQuery didn’t like “textbox”. I had to change it to “text” to get this unit to work.
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 🙂
Great Tutorial..!!
Thank you 🙂
Thank You SOOO Much!
this is not working code…please share the new code quickly .
How do i get value from text field other website.
like example i want to get domain validation from go daddy ?
thanks
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:
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.
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
Same concept, add onkeyup or onSomeEvents on “name” field.
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
jquery.com
Working Perfectly 🙂
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.
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?
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!
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?
just pass as query parameter
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
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
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.?
if u r use c# ………
u must have a
……………….
……………….
…………….
……………
remove the and only…..but don’t remove other content.
This code doesn’t work when I tried using it, how is it able to work on your site?
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.