Solved

How to get text from a text input in jquery

Posted on 2010-09-04
6
336 Views
Last Modified: 2012-05-10
Ok, I admit - I'm a total newbie at jquery (though highly skilled in both C# and Flash ActionScript 3).  I'm missing something obvious.  Every website I look at says, to get the text from a text input, use val().  They even have working examples.  A typical good website with the right answer is http://www.electrictoolbox.com/jquery-get-set-form-values/demos/

It's very clear, and from the way I read it, this html should work fine.

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Test html</title>
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript">
		function searchClicked()
		{
			alert('test input = ' + $('testinput').val() );
		};
				
		function documentReady()
		{
			$('#my_test').click( searchClicked );
		};
				
		$(document).ready( documentReady );
	</script>        
</head>

<body>
<div id="leftPane" class="ui-widget-content">
	<div id="leftPanel">
		<div>
			<form action="">
				Test String: <input type="text" id="testinput" /><br/> 
				<br/>
				<button id="my_test">Test</button>
			</form>
		</div>
	</div>
</div>

</body>
</html>

Open in new window


It doesn't.  When I enter text in the input field and click the button, the result is always undefined.

What am I doing wrong?

Thanks!

(Also attached as a file for easy testing.)
test.html
0
Comment
Question by:Carnou
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
6 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 300 total points
ID: 33603752
Missing # : alert('test input = ' + $('#testinput').val() );
0
 
LVL 22

Assisted Solution

by:kadaba
kadaba earned 200 total points
ID: 33603758
alert('test input = ' + $('#testinput').val() );

you missed the # id selector
0
 
LVL 10

Author Comment

by:Carnou
ID: 33603766
Wow.  I banged my head on that for an hour.
I'm going to assume you both posted the answer at the same time, and that kadaba was just slightly slower on the draw.  I hope leakim971 won't mind if I split the points.
Thanks for the super-fast answer!
0
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 
LVL 10

Author Closing Comment

by:Carnou
ID: 33603768
Thanks to both of you!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33603776
You're welcome! Thanks for the points!
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33603778
well you could have given leakim the points, I would not have minded.
except I hope you know # is an id selector, . is a class selector and so on. Information is more important than findings.

Thanks,
Have a nice day ahead.
0

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question