Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    49
    Thanks
    8
    Thanked 2 Times in 2 Posts

    Return back to <p> from textarea?

    Hi, I currently have a <div> with a <p> and have an edit button that when clicked will transform it into a textarea using jQuery's .html().

    I also have a cancel button which allows the user to cancel the edit and return the textarea to the previous content, any ideas how I do this?

    JavaScript
    Code:
    // JavaScript Document
    jQuery(document).ready(function(e) {
        
    	$('#edit_p').click(function(e){
    		$('#cancel_p').show();
    		$('#greeting').html("<textarea id='txt_greeting' cols='20'>" + $('#greeting p').text() + "</textarea>");
    		$(this).hide();
    	});
    	
    	$('#cancel_p').click(function(e){
    		$('#edit_p').show();
    		$(this).hide();
    	});
    	
    });
    HTML
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Textarea/Button Change</title>
    <script type="text/javascript" src="jquery-1.7.js"></script>
    <script type="text/javascript" src="txt_area_jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="txt_area_style.css" />
    </head>
    
    <body>
    <div id="greeting"><p>Hello, today is a great day!</p></div>
    <input type="button" name="edit_p" id="edit_p" value="Edit" />
    <input type="button" name="cancel_p" id="cancel_p" value="Cancel" />
    
    <?php
    
    ?>
    </body>
    </html>
    Last edited by RiskyShenanigan; 11-07-2011 at 10:13 PM.

  • #2
    New Coder
    Join Date
    Jun 2011
    Posts
    49
    Thanks
    8
    Thanked 2 Times in 2 Posts
    Problem fixed.


  •  

    Posting Permissions

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