How to preview HTML code
There may be several such situations where a Webmaster needs to include a dynamic preview system of HTML code as typed by the viewers into a text field of a web page. Examples of such situations are,
- Comment preview before final submission.
- Article preview before submitting an article into an Ezine, etc.
Comment preview for your blog
You often see in few weblogs or message boards; they offer their user to view the comment preview as user typed in the input comment field before they submit their comments. You can include this feature too in your website. It requires only few lines of JavaScript code to insert. The required steps are as follows.
1. Insert a blank division any where on your web page where you want to show preview. This division actually will hold the preview of user comment when user requests it by clicking a link or by pressing a button.
<div id="preview"></div>
2. Put a preview button just below the comment field. Say the id of your comment field is "comment". Then the comment field and button code looks like,
<textarea id="comment" row="15" col="20"></textarea>
<input type="button" value="Preview.." onclick="javascript:showPreview()" />
3. Now add the following JavaScript code between <head> and </head> tags of your comment page.
<script type="text/javascript">
<!--
function showPreview()
{
var s=document.getElementById('comment').value;
if((s.length>1000)||(s.length<10)){alert("Code length must be within 10 to 1000 characters."); return false;}
//Add your filter code or validation rule here.
document.getElementById('preview').innerHTML=s;
}
-->
</script>
How this script works
Working of this script is very simple. The onclick event added to the button code calls the JavaScript function showPreview(). This JavaScript function defined between
and tag of your web page. At the first line of this function variable s holds the text typed into the textarea. At the next line this function validates this text and if failed generates an error message. If you require you can add more validation rule or filter here. At the last line, JavaScript dynamically add those HTML code (hold by variable s) into the blank division 'preview'. Now user will see the output of the HTML code, which he inserted into the textarea.How to preview HTML code as a web page
If you need to preview of HTML code of a complete web page then you have the following options.
- Preview code on a new window.
- Preview code on the same window.
- Preview code on a new Frame.
1. Create a new web page say preview.html. Preview of HTML code will be displayed on this page. So do not insert any HTML code here. Just add the following lines of JavaScript code in it.
<script> var s = window.location.search.substring(1); s=decodeURIComponent(s.replace(/+/g, ' ')); //Add your filter code or validation rule here. document.write(s.substr(2)); </script>
The purpose of this code is to isolate the query data from the URL; decode it, and then add dynamically into the web page. So to display the preview we have to send the code as query string to the preview.html page.
2. Now add a textarea into the web page from where you want to generate preview of HTML code. This textarea will hold the HTML code as typed by the user. Add a button just below that textarea and add an onclick event in it.
<textarea id="testcode" row="15" col="20"></textarea>
<input type="button" value="Preview.." onclick="javascript:showPreview()" />
3. Now we have to write an event handler JavaScript function showPreview() to handle the onclick event. The purpose of this function is very clear.
- It will accept HTML code from the textarea.
- Validate that code. You can add your own validation rule and filter code here.
- Build a query URL by adding that code with the preview page URL and redirect browser location to that query driven URL. If you want to generate preview on a new window then instead of redirecting location open a new window with that URL.
<script type="text/javascript">
<!--
function showPreview()
{
var s=document.getElementById('testcode').value;
if(s.length>1000){alert("Code length must be within 10 to 100 characters."); return false;}
var url="preview.html?q="+s
location.href=url;
//To generate preview on new window instead of location.href=url; use
//window.open(url);
}
-->
</script>
Insert this code between <head> and </head> tags and save it. Now your code preview is ready for use.
