Resolved Return back to <p> from textarea?

RiskyShenanigan · 11-07-2011, 08:42 PM

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>

RiskyShenanigan · 11-07-2011, 09:13 PM

Problem fixed.