Why does this code send the form input to the URL?
How do I get this form input to be stored in a variable, that I can then use later - rather than being appended to the end of the URL?

        <script type="text/javascript">
    		
    		$(function() {
    				var tag_box = $("<div>").appendTo("body").css({
    					"width": "40px",
    					"height":"40px",
    					"border":"4px solid #000000",
    					"position":"absolute",
    					"display":"none", 
    					"padding":"15px"
    					});
    					    
       		 	var comment_box = $("<form action='#'><input id='comment' type='text' name='comment' placeholder='Add comment'></form>").appendTo(tag_box).css({"position":"absolute"});
    
    		
    			$("#image-wrapper").live("click", function(e) {
    				tag_box.css({
    					"left": e.pageX - 40,
    					"top": e.pageY - 40, 
    					"display": "block"
    					})
    				.after(comment_box.css({
    					"left": e.pageX - 65,
    					"top": e.pageY + 40
    				}));
    				 return false;	
    				});
    								
    			});
    					
    </script>
    <body>
    
    <div align="center">  
    
    	<img src="images/ror1.gif" width="760" height="182" alt="Ror1" id="image-wrapper">
    
    </div> 
    </body>


Why does this code send the form input to the URL?
===

How do I get this form input to be stored in a variable, that I can then use later - rather than being appended to the end of the URL?

        <script type="text/javascript">
    		
    		$(function() {
    				var tag_box = $("<div>").appendTo("body").css({
    					"width": "40px",
    					"height":"40px",
    					"border":"4px solid #000000",
    					"position":"absolute",
    					"display":"none", 
    					"padding":"15px"
    					});
    					    
       		 	var comment_box = $("<form action='#'><input id='comment' type='text' name='comment' placeholder='Add comment'></form>").appendTo(tag_box).css({"position":"absolute"});
    
    		
    			$("#image-wrapper").live("click", function(e) {
    				tag_box.css({
    					"left": e.pageX - 40,
    					"top": e.pageY - 40, 
    					"display": "block"
    					})
    				.after(comment_box.css({
    					"left": e.pageX - 65,
    					"top": e.pageY + 40
    				}));
    				 return false;	
    				});
    								
    			});
    					
    </script>
    <body>
    
    <div align="center">  
    
    	<img src="images/ror1.gif" width="760" height="182" alt="Ror1" id="image-wrapper">
    
    </div> 
    </body>

