How to provide preview functionality using JavaScript or jQuery?

Question

I have 3 templates (static html pages).

Based on my selection one template will open in the form of popup. I have to add some content to that template when I want to show that template in the form of popup. Now I'm showing that templates with using window.open(url).

But I'm not able to add the content to that template while showing in the form of popup (in single word when I click on "preview" button in the form then popup will generate with predefined HTML template with some form data).

Basically I am looking for preview functionality using JavaScript or jQuery, so please provide code for the same.

Answer 1

create a test.html page and Paste this code into the HEAD section of your HTML document.

function displayHTML(form) {
  var inf = form.htmlArea.value;
  win = window.open(", ", 'popup', 'toolbar = no, status = no');
  win.document.write("" + inf + "");
}

Paste this code into the BODY section of your HTML document

<form>
  <textarea name="htmlArea" cols=45 rows=6></textarea>
  <br>
  <input type="button" value=" view " onclick="displayHTML(this.form)">
</form>

Test it in browser..

If found helpfull please do the same in your code.

Answer 2

if you use window.open() you can give a name to your window and then manipulate the content of that window:

var win = window.open(url, 'mywindow');
win.document.write('<h1>Popup Test!</h1>');

if the window with name 'mywindow' doesn't exist it will open a new one, otherwise it will use the existing window