Advanced Search

Return to Snippet

Revision: 23971
at February 17, 2010 20:34 by bitmanic
Initial 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" />
	<title>Title</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.min.js"></script>
</head>
<body>

	<h1>Approach 1</h1>
	<a id="td_msg">Click <b>here</b></a>
	<input type="text" id="target" />
	<script type="text/javascript">    
		
		/* Always use the 'document ready' code with jQuery.  Here's why: http://docs.jquery.com/How_jQuery_Works#Launching_Code_on_Document_Ready */
		$(document).ready(function(){

			/* This script will REPLACE the input's content every time you click on the link. */
			$('#td_msg').click(function(){    // Whenever the user clicks on the link with id 'td_msg',
				var thisValue = $(this).text(); // store the text inside of this link as a string value,
				var thisTarget = $('#target');  // store the target element that you want to manipulate,
				thisTarget.val(thisValue);      // and finally assign the link's content as the value of the text input.
				return false;                   // This line will prevent the default link behavior.
			});

		});
	</script>

	<hr />

	<h1>Approach 2</h1>
	<a id="td_msg2">Click <b>here</b></a>
	<input type="text" id="target2" />
	<script type="text/javascript">    
		
		$(document).ready(function(){

			/* This script will APPEND the input's content every time you click on the link. */
			$('#td_msg2').click(function(){            // Whenever the user clicks on the link with id 'td_msg2',
				var thisValue = $(this).text();          // store the text inside of this link as a string value,
				var thisTarget = $('#target2');          // store the target element that you want to manipulate,
				var targetVal = thisTarget.val();        // store the target element's value,
				thisTarget.val(targetVal+' '+thisValue); // and finally assign the link's content as the value of the text input.
				return false;                            // This line will prevent the default link behavior.
			});

		});
	</script>

</body>
</html>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Adding content to a text input via a link click.

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
javascript, link, html, jquery

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
jQuery