Form Submit And HTML Characters

How to get text areas to display characters as the HTML escape characters

[crazy_yak]

I'm setting up my own blog from scratch. I submit the posts using a form which then takes it into MySQL via PHP.

When I add a post the whole of the HTML goes in with it for example a typical thing to submit might be:

<p>Hello world!</p>
<p>Here's some example HTML code: <code>&lt;input type=&quot;text&quot; /&gt;</code></p>

When I submit it the first time it all goes through fine.

However, when I come to update it it all gets put back into a text area. Now the text area displays the HTML escape characters (&lt;, etc) as the characters they represent (<, etc.), while in the source they are still encoded as &lt;, whereas the normal <p> are encoded as '<p>'. E.g.

<p>Hello world!</p>
<p>Here's some example HTML code: <code><input type="text" /></code></p>

But now when I press submit it seems to submit what's viewed in the text area, rather than the source (which is still like the first example). So the &lt; gets turned into a <. This of course messes up the HTML because these are now all read as actual code rather than example code.

Is there any way to get the textarea to display the actual source rather than the characters? So that when it's submitted the code remains code and the characters remain characters?

I can think of ways round it, so it's not the end of the world. But I was just wondering if there was a nice easy fix.

[crazy_yak]

I've actually come up with a way around this. The page which sends the data to the update page parses the code for '&'s. It replaces then with '&#'. Then, when the update page loads a JavaScript goes through the textarea and replaces any '&#'s with just '&'s. That way it displays properly in the textarea.

[DrDoc]

Better yet (and more correct), replace & with &amp;

[crazy_yak]

The '&'s are only in the source of the HTML, so they're only there if they already represent an HTML character like &lt; or &gt; Replacing them with &amp; would give me crazy things like '&amp;lt;'.

[rocknbil]

Is there any way to get the textarea to display the actual source rather than the characters? So that when it's submitted the code remains code and the characters remain characters?

The three you want to sub out are <, &, and > in a mini-CMS. You just make sure you do that in the right order. If you get your ampersands first, the ones in the &lt; and &gt; that follow won't get "amped." :-)

Going into the database (perl example.) I do this so the display can come directly from the database without substitution.

# Get the ampersands first. This is really for
# post- edit data, initial ones will be fine.
$txt =~ s/\&amp\;/\&/g;
$txt =~ s/\&lt\;/\</g;
$txt =~ s/\&gt\;/\>/g;

Extract from the DB for the purpose of editing, you do the opposite:
$txt =~ s/\&/\&amp\;/g;
$txt =~ s/\</\&lt\;/g;
$txt =~ s/\</\&gt\;/g;

This will always keep your html displaying correctly in text areas.

when the update page loads a JavaScript goes through the textarea and replaces any '&#'s with just '&'s.

And if Javascript is disabled or malfunctions, what do you get?

[crazy_yak]

I'm the only person who uses it, so I'm not too worried about JavaScript being disabled. If I was making it for multiple users then I wouldn't use JavaScript. But it's the best solution I could hack together so far.

The 'amped' thing really isn't a problem: I only use '&' when I'm putting in HTML characters.

I'm afraid your Perl script would be of no help to me.

I'm not sure I explained my problem properly.

I'm trying to make a page that will update some HTML code I've previously entered in. But some of this HTML code contain HTML character encodings. I don't want the actual HTML things like '<p>' to become '&lt;p&gt;', I only want things that are already character encoded to stay character encoded.

I want the '&lt;'s to appear as '&lt;'s rather than as '<'s when they are placed into the 'value' attribute of a textarea (well, they can't actually go in the value attribute as a textarea doesn't have one, so i put it between the <textarea> open and close tags). But textareas, like any other bit of a webpage, turn HTML characters into their actual value. So all my carefully entered HTML characters turn into '<'s, which then get confused with the actual '<'s (like in '<p>').

My solution so far is to parse it with PHP so that the '&'s become something else (I went with '&#'. If left like this the contents of my edit box would then look like:

<p>Hello</p>
<code>&#lt;input type=&#quot;text&#quot; /&#gt;</code>

This stops the textarea displaying the '&lt;'s etc. as '<'s (as then they'd get confused with the actual HTML code). But to make it so that I don't have to look at the '&#'s I use JavaScript to remove then and update the textarea - because it's done after loading it doesn't render then in the textarea as the actual HTML characters, but rather renders them as '&lt;' which is exactly what I want.

So the problem is simply that the textarea renders HTML characters as it would anywhere else on a page. But when you're trying to enter HTML code into that box, that's not much help. My way gets round that.

[crazy_yak]

Even more simple version.

Say I want to put '&ouml;' into a textarea using PHP so that it displays in the textarea as '&ouml;' and not simply as 'ö'. If I do the following it will not work:

[code]
<textarea>[Use PHP to echo "&ouml;"]</textarea>
[\code]

This will give me a textarea that reads "ö". But that's not what I want. I want it to read '&ouml;'. Is there any way to do that?

[DrDoc]

$string = "&ouml; ö";
echo htmlspecialchars($string);

Output: &amp;ouml; &ouml;

[crazy_yak]

Ah, of course. So simple!

Thanks.