The best way to create a PREVIEW button in a form?

PHP
1

Hi I am creating a site that users can post articles too.

I plan to have a shell PHP file with the form variables embedded so that when a user clicks preview (which will be sitting right next to the submit button) a new window pops up and they can preview exactly how their article will look on the site.

The problems I’m having figuring it out are that

  1. I’ve already started the <form> tag so any buttons inside it will go to that file but I want it to go to another file.

  2. How do I get it to pop-open a new window? I don’t want the users to lose all their work on accident using the bakc button.

Please help. I’m thinking the answer may be in javascript but I am clueless with it.

2

yes, you have to use javascript to make the popup.

onclick=“window.open(‘file.php?foo=bar’,‘’,‘width=400,height=400’)”

now the problem with that is seeing how they didn’t insert anything you can’t send an id or anything. my guess is that once the page popups up you have to use more javascript to get the form fields to diplay the contents of the form they filled out.

which is something like

var someformvar = parent.form_name.field_name.value

but my javascript is limited so you would have to paly around with it. I found it easier to just reload the page on submit “preview” then reload the values into the form that was sent.

3

u can do it dinamicaly!
make a layer where u want to be displayed into the submit page and give it style display none…


#lay_id {
display:none;
}

then make a display table into thelay_id div like where the article is submited.
now some code for display the layer…


function show_lay() {
if(document.getElementById) {
var lay = document.getElementById("lay_id");
if(lay.style.display == "none") {
lay.style.display = 'block';
}
}
}

the name your td ids into that layer when u want preview…
then insert another piece of code to display it


function preview() {
 document.getElementById('td_id_where_u_want_display_the_field').innerHTML = document.your_form.your_field_to_display.value;
}

now call that function with preview button onClick=“show_lay();preview();
i hope im clear…
cheers :)”

4

[Reminder] - I think there were a few things that you overlooked or missed as you were providing the code. I got the jist of it though - Thanks a lot :tup: - I was looking for this info as well.

I have provided the code that worked for me below:


<html>
<head>
<style type="text/css">
<!--
// This will be the place holder for the previewed data
#preview_text {  display:none;  }
-->
</style>

<script language="javascript">
<!--
// This function checks if the place holder exists and set to hidden, if so changes it to display information in text box
function show_lay()
{  	
  if(document.getElementById)   	
  {   		
    var lay = document.getElementById("preview_text");  		
    if( lay.style.display = "none")   		
    {  			
      lay.style.display = 'block';  		
    }  	
  }
}

function preview()
{  	
   // This will take the text entered in the text box and assign it to the preview placeholder area
   document.getElementById('preview_text').innerHTML = document.dataform.data.value;  	
}
 -->
</script>
</head>
<body>
<center>
<div id="preview_text">Preview goes here</div>  <h2>THIS IS A TEST</h2>  <hr>

<form name="dataform">
<textarea name="data" rows="15" cols="30"></textarea>  <br>
<input type="button" value="Preview" onClick="preview();show_lay();">
</form>
</center>
</body>
</html>

Many thanks!

5

i mess it up into preview function couse it was late yesterday night :frowning:
but i think the concept was clear :slight_smile:
cheers :slight_smile:

ps u have first to call the show_lay() onclick then preview();
like onClick=“Show_lay();preview();” couse foirst have the layer to be displayed and then to fill the data!
if u fill the data into non displayed layer yet the code is in conflict!

6

interesting concept but what if you have more than 1 inpout box in the form you want to display?

7

You may simply concatenate the values using the Javascript’s join function “+”, as well you can format the text as you would like using CSS or other.

CSS example
#preview_text { text-align:left; margin:5px; display:none; border: 1px solid #666; padding:5px; }



document.getElementById('preview_text').innerHTML =
"<strong>"+document.dataform.title.value+"</strong><br>"+document.dataform.data.value+;
8

ahh thanks. that is good stuff.

9