From text box to HTML preview

**iqchicken** · 05-21-2006, 09:37 PM

How in the world would i go about making a webpage that has a text box on it. Someone types in their html code into it, and the page will create a preview of the html they have put in the box?

I thought it would be ez, but after a little research.. i have no idea where to get started other than making a simple form with a textbox on it.

**mgraphic** · 05-21-2006, 09:58 PM

Probably be able to define a JS function in the head that when called, it opens a new window with the document.write placing contents from the textarea field

**iqchicken** · 05-21-2006, 10:01 PM

i'd like for it to refresh the current page kinda.. with the html preview at the bottom.. kinda like

http://www.practiceboard.com

**mgraphic** · 05-21-2006, 10:09 PM

This type of method is built by a server-side script (such as php or asp) witch just resubmits the form to itself, the the server is parsing a script that translates the user input into the html output of the entire page.

**iqchicken** · 05-21-2006, 10:35 PM

so the form action in this is what does it? i tried to test it out locally.. but I guess I would have to do this on a php enabled server or something eh?

Quote:

<?php
$Fname = $_POST["Fname"];
$Lname = $_POST["Lname"];
$gender = $_POST["gender"];
$food = $HTTP_POST_VARS["food"];
$quote = $_POST["quote"];
$education = $_POST["education"];
$TofD = $_POST["TofD"];
?>
<html>
<head>
<title>Personal INFO</title>
</head>
<body>
<form method="post" action="<?php echo $PHP_SELF;?>">
First Name:<input type="text" size="12" maxlength="12" name="Fname"><br />
Last Name:<input type="text" size="12" maxlength="36" name="Lname"><br />
Gender:<br />
Male:<input type="radio" value="Male" name="gender"><br />
Female:<input type="radio" value="Female" name="gender"><br />
Please choose type of residence:<br />
Steak:<input type="checkbox" value="Steak" name="food[]"><br />
Pizza:<input type="checkbox" value="Pizza" name="food[]"><br />
Chicken:<input type="checkbox" value="Chicken" name="food[]"><br />
<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!</textarea><br />
Select a Level of Education:<br />
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option></select><br />
Select your favorite time of day:<br />
<select name="TofD" size="3">
<option value="Morning">Morning</option>
<option value="Day">Day</option>
<option value="Night">Night</option></select><br />
<input type="submit" value="submit" name="submit">
</form>

**mgraphic** · 05-21-2006, 10:59 PM

Correct

**gumlor** · 12:02 AM

try this:

HTML Code:

<html>
<head>
<script language="JavaScript">
function previewHtml() {
var textarea = document.getElementById('source');
var srcText = textarea.value;
var viewDiv = document.getElementById('view');
viewDiv.innerHTML = srcText;
}
</script>
</head>
<body>
<textarea id="source" style="width:100%;height:250px"><b>enter html here</b></textarea>
<input type="button" value="preview html" onClick="previewHtml()">
<hr>
<div id="view"></div>
</body>
</html>

**mastercomputers** · 05-22-2006, 12:17 AM

I recommend against not using innerHTML as it is IE specific although Firefox does support this too not all browsers do, it's not standard, you have to use proper DOM creation to do such a thing so that it is known to the DOM document.

Another thing is the input element requires it to be inside a form, only if using XHTML 2.0 and XForms would this be possible but IE does not support this yet, nor do they say when they will.

I would suggest using a serverside language, as you can not secure the type of input effectively using javascript which would be a big concern if you allowed this.

You do require a PHP enabled web server for your code, and what you've written from what I've looked at so far, I can tell you that you'll receive a lot of errors and warnings.

You could quickly write something like this if you ignore the security concerns of it, it's not a tough project at all.

Cheers,

MC

**iqchicken** · 11:28 AM

well ok.. so i'll get a bunch of errrors.. lol.. well the biggest error of all is that I'm not sure how to get even the basic idea of a php-self form. I have tried that code (which is from a tutorial site on the subject) on a php enabled server and it simply refreshes the page and clears the contents of the form. I'm not sure what's wrong. I'm a complete noob, but attemtping to learn.

security will be more of an issue when i get to your level of knowledge on the subject