SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery - Use text in input text field

    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.

    Code:
    <!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. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    For <input> you need to use .val(), not .text()
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <!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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •