jQuery - Use text in input text field

JavaScript
1

Hi all

Still new to jQuery so I’m have problems.

I’m trying to capture and use the text in a text field after a send button is clicked this is what I have.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<script type="text/javascript" src="js/jQuery1.4.3.js"></script>
	<script type="text/javascript">
		$(function(){	
			$('button').click(function(){
				var name = $('#email').text();
				alert(name);
			})
		});

	</script>
	
	<title>untitled</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		#wrap{
			margin:20px;
		}
		input{
			background:#bbb;
			padding:.2em;
		}
	</style>
</head>

<body>
	<div id="wrap">
		<input type="text" id="email">
		<button>Send</button>
	</div>
</body>
</html>
2

For <input> you need to use .val(), not .text() :slight_smile:

3

Thanks for that

Now I have another problem. The text field will be a mail list submission, after clicking the button I wanted to display a thank you (maybe using the email address captured). At the moment the Thank you message only displays for a second after the button is pressed than it disppears again. How can I get the thank you message to display after the send button is clicked.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<script type="text/javascript" src="js/jQuery1.4.3.js"></script>
	<script type="text/javascript">
		$(function(){	
			$("button").click(function(){
				var name = $("#email").val();
				$("p").text('Thank you for your email');
			})
		});

	</script>
	
	<title>untitled</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		#wrap{
			margin:20px;
		}
		input{
			background:#bbb;
			padding:.2em;
		}
	</style>
</head>

<body>
	<div id="wrap">
		<form method="post">
		<input type="text" id="email" />
		<button>Send</button>
		</form>
		<p></p>
	</div>
</body>
</html>