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,
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.
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>
If you need to preview of HTML code of a complete web page then you have the following options.
<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>
Insert this code between <head> and </head> tags and save it. Now your code preview is ready for use.