[SOLVED] Preview Popup From Form Data

kneifelspy · January 14, 2009

I am building a website that allows you to post CD reviews. I want to know how I can create a pop-up using Javascript that takes what has been written in the forms (textareas etc) and displays a preview of how the post will look without sending post-data first. So that way I can have the form action be to submit the data to be processed.

Can you send data to a pop-up from the text boxes without submitting it first? I am fairly JavaScript illiterate, can someone offer an olive branch and suggest some code?

Here is my form:

	<form enctype="multipart/form-data" action="review.publish.php" method="post">
<input type="text" name="cf_band" value="BAND NAME" /><br /><br />
<input type="text" name="cf_title" value="ALBUM TITLE" /><br /><br />
<textarea cols="30" rows="5" wrap="soft" name="cf_body">BODY TEXT</textarea><br /><br />
<input type="text" name="cf_web" value="BAND WEBSITE" /><br /><br />
<input type="text" name="cf_author" value="REVIEW AUTHOR" /><br /><br />
<input type="text" name="cf_timestamp" value="<? echo $timestamp; ?>" /><br />
<input type="submit" value="Post" />
</form>

Thanks!

KevinM1 · January 14, 2009

I am building a website that allows you to post CD reviews. I want to know how I can create a pop-up using Javascript that takes what has been written in the forms (textareas etc) and displays a preview of how the post will look without sending post-data first. So that way I can have the form action be to submit the data to be processed.

Can you send data to a pop-up from the text boxes without submitting it first? I am fairly JavaScript illiterate, can someone offer an olive branch and suggest some code?

Here is my form:
	<form enctype="multipart/form-data" action="review.publish.php" method="post">
<input type="text" name="cf_band" value="BAND NAME" /><br /><br />
<input type="text" name="cf_title" value="ALBUM TITLE" /><br /><br />
<textarea cols="30" rows="5" wrap="soft" name="cf_body">BODY TEXT</textarea><br /><br />
<input type="text" name="cf_web" value="BAND WEBSITE" /><br /><br />
<input type="text" name="cf_author" value="REVIEW AUTHOR" /><br /><br />
<input type="text" name="cf_timestamp" value="<? echo $timestamp; ?>" /><br />
<input type="submit" value="Post" />
</form>
Thanks!

Well, there's two main ways to do it - to have the main script create a table (or another form) in the pop-up window dynamically, or to create a basic pop-up window page, then have the main script open a window containing that page, which it can then send the form info to. The second option is the easier of the two.

Basically, you need to tell the form that rather than submit the info to the server upon submission, it needs to open up that pop-up window. In order to do that, you must write a function that hooks into the form's submit event. This is easy to do, provided you give your form a name. In the code below, I've given your form the name 'myForm.

<html>
<head>
   <title>blah</title>
   <script type="text/javascript">
      window.onload = function() // <-- this line assures us that our script won't load until after the HTML
      {
         var myForm = document.forms["myForm"];

         myForm.onsubmit = function() // <-- this creates a function tied to the form's submit event
         {
            var popup = window.open('http://www.mypopupurl.com', 'popup'); /* <-- this creates the popup.  do a google search on javascript window.open to see all of the options available to you */
            
            /* you can now populate the other window with values from the form.  the code below assumes that you created a div in the popup window with an id of 'results' */

            var results = popup.document.getElementById('results');
            results.innerHTML = "Band name: " + this.elements["cf_band"].value + "<br />";
            return false; // <-- this stops the form on the original page from being submitted
         }
      }
   </script>
</head>

Keep in mind that the code above isn't intended to be the entire solution to your problem. Instead, it's basically an outline the overall direction you should go in. A lot depends on how you structure the HTML that forms the pop-up page.

The other component is actually submitting the values if the user agrees that everything is okay. So, you'll need to figure out a way to send the info from the pop-up page. You could recreate the form, or pass the values from the main page to the pop-up, and store them in hidden input fields. Either way, you'll need two buttons - one to submit the info (a normal form submit input), and one to close the current window, so the user can try again on the main page. Let me know if you need help with that, too.

kneifelspy · January 14, 2009

Basically, you need to tell the form that rather than submit the info to the server upon submission, it needs to open up that pop-up window. In order to do that, you must write a function that hooks into the form's submit event. This is easy to do, provided you give your form a name.

Hmm, I want the submit action for the form to be reserved to sending information to the next .php page, rather than populating information for the popup. Does this code allow me to have TWO submit buttons for one form (one that on-click uses form data for preview, and one that sends post data to the next .php file)--or two forms each with a submit button (the second form gathers info from the first form's text-area data). Will the Javascript popup gather information that is not yet POST data?

kneifelspy · January 14, 2009

Arg, forgive the double-post. I could not edit the above.

If it's possible to send the post-data from the popup back to the main-window after preview, that would be excellent. I am willing to do that if you can suggest some code to close the pop-up and continue editing, or submit.

KevinM1 · January 15, 2009

Hi, sorry for the delay.

You have to remember that JavaScript is client side, and is executed before PHP. So, assuming you create a second 'Preview' button (which is probably the best way to go), POST data won't be sent to the pop-up. Why? Because the pop-up will be generated through onclick rather than onsubmit. Instead, the pop-up window's values will simply be populated by the parent window's form field values (i.e., document.forms["myForm"].elements["cf_name"].value).

It can be confusing, since you can use HTML already stored on your server to act as the pop-up page. The thing to remember is that the JavaScript in the parent window is merely modifying the pop-up's output after that HTML has been loaded. It's not actually modifying the markup itself.

I believe you can have the child/pop-up window modify things in the parent window. I'm not entirely sure how to do it, as I tend not to use pop-ups myself. You'd probably need to write a separate JavaScript script for the pop-up page which detects whether or not it was opened by a script itself, then have it write back to the parent window. This brings me to a larger question:

Are you sure you want to use a pop-up for this? Many users have pop-up blockers, so you're not guaranteed that the pop-up will always be available. You might be better served to create an intermediary PHP script that will preview the finalized form info.

kneifelspy · January 15, 2009

Hmmm, I can see your point about not using a popup because of blockers. But I'm still inclined to do so. How about if I created a javascript that executed two different ACTIONS for one form, based on which button receives an onClick command. How could I reconcile THAT code to your code. Meaning, I choose which form to submit the POST data based on which button is pressed?

How would your code fit into something like THIS, pretend my form is named "Form 1":

<script language="Javascript">
<!--
function OnButton1()
{
    document.Form1.action = "Page1.php"
    document.Form1.target = "_blank";

    document.Form1.submit();

    return false;
}

function OnButton2()
{
    document.Form1.action = "Page2.php"
    document.Form1.target = "_blank";

    document.Form1.submit();

    return true;
}
-->
</script>

Except for the FIRST one instead of going to Page2.psp it executes a popup window that gathers the form data. Any help reworking THIS code?

kneifelspy · January 15, 2009

As always, I'm ignoring the double-posting rules. I came up with THIS script to make this function happen by conglomerating the two scripts:

<script type="text/javascript">
window.onload = function() // <-- this line assures us that our script won't load until after the HTML
{
var myform = document.forms["myform"];

	function OnButton1()
	{
		myform.action = "news.preview.php";
		myform.submit();

		var popup = window.open('news.preview.php', 'Preview_Entry');

		var results = popup.document.getElementById('results');
		results.innerHTML = "Band name: " + this.elements["cf_band"].value + "<br />";

		return false;
	}

	function OnButton2()
	{
		myform.action = "news.submit.php";
		myform.submit();

		return true;
	}
}
</script>

Any suggestions on how to improve this and make it function CORRECTLY?

KevinM1 · January 15, 2009

As always, I'm ignoring the double-posting rules. I came up with THIS script to make this function happen by conglomerating the two scripts:

<script type="text/javascript">
window.onload = function() // <-- this line assures us that our script won't load until after the HTML
{
var myform = document.forms["myform"];

	function OnButton1()
	{
		myform.action = "news.preview.php";
		myform.submit();

		var popup = window.open('news.preview.php', 'Preview_Entry');

		var results = popup.document.getElementById('results');
		results.innerHTML = "Band name: " + this.elements["cf_band"].value + "<br />";

		return false;
	}

	function OnButton2()
	{
		myform.action = "news.submit.php";
		myform.submit();

		return true;
	}
}
</script>

Any suggestions on how to improve this and make it function CORRECTLY?

You should remove 'myform.submit();' from the first function. You don't want the form to be submitted during the preview stage. Simply having a 'return false;' at the end should suffice. I don't think you need to change the form's action there, either, since you're not submitting the form at that time.

You'll need to link the buttons to their respective functions. Assuming these are generic submit inputs, you can do something like:

var formPreview = myform.elements["preview"]; //assuming the input is named 'preview'
var formSubmit = myform.elements["submit"];

/* function definitions for OnButton1 and OnButton2 go here */

formPreview.onclick = OnButton1;
formSubmit.onclick = OnButton2;

kneifelspy · January 15, 2009

I tried the code out as suggested, but the buttons don't work at ALL:

Here is the script:

<script type="text/javascript">
window.onload = function()
{
var myform = document.forms["myform"];
var formPreview = myform.elements["preview"];
var formSubmit = myform.elements["submit"];

	function OnButton1()
	{
		myform.action = "news.preview.php";

		var popup = window.open('news.preview.php', 'Preview_Entry');

		var results = popup.document.getElementById('results');
		results.innerHTML = "Band name: " + this.elements["cf_band"].value + "<br />";

		return false;
	}

	function OnButton2()
	{
		myform.action = "news.submit.php";
		myform.submit();

		return true;
	}

formPreview.onclick = OnButton1;
formSubmit.onclick = OnButton2;
}
</script>

Here is the form:

<body>

<form name="myform" method="post">
<input type="text" name="cf_title" value="Enter news-post title!" /><br /><br />
<input type="text" name="cf_author" value="Author name!" /><br /><br />
<textarea cols="30" rows="5" wrap="soft" name="cf_body">Body text goes here!</textarea><br /><br />
<input type="text" name="cf_timestamp" value="<? echo $timestamp; ?>" /><br />
<input type="submit" name="preview" value="Preview" onclick="return openPreview();" />
<input type="submit" name="submit" value="Submit" onclick="return openSubmit();" />
</form>

</body>

I've been toying around with another way to do this, and I wanted to know if it was possible to send $_POST data into the pop-up window. I tried THIS code, but the POST data doesn't transfer into the pop-up window. ALSO the main window opens up the same file as the pop-up but DOES display the POST data.

I'm a little more inclined to simply correct this code, but I'm not sure if sending that $_POST data is even possible. I need the main window to remain the same, and the pop-up to get the data.

<html>
<head>
<title>New Post Test</title>

<script language="JavaScript">

function popPreview(wname)
{
	features = 'width=500, height=600, toolbar=no, menubar=no, resizable=no, location=no, directories=no, status=no';
	pop = window.open('', wname, features);
	if(pop.focus)
	{
		pop.focus();
	}
	return false;
}

function openPreview()
{
	document.myform.action = "news.view.php";
	document.myform.onsubmit = popPreview(this.target);
	document.myform.submit()

	return false;
}


function openSubmit()
{
	document.myform.action = "news.publish.php";
	document.myform.submit();

	return true;
}

</script>

</head>

<body>

<form name="myform" method="post">
<input type="text" name="cf_title" value="Enter news-post title!" /><br /><br />
<input type="text" name="cf_author" value="Author name!" /><br /><br />
<textarea cols="30" rows="5" wrap="soft" name="cf_body">Body text goes here!</textarea><br /><br />
<input type="text" name="cf_timestamp" value="<? echo $timestamp; ?>" /><br />
<input type="button" value="Preview" onclick="return openPreview();" />
<input type="button" value="Submit" onclick="return openSubmit();" />
</form>

</body>
</html>

kneifelspy · January 15, 2009

Whelp, I came up with a solution that I'm happy with and that's to simply transfer the values of the text-boxes by calling them up with getElementById. Thank you Nightslyr, if it wasn't for the code you sent me. I'd never have come up with this solution.

When I go to integrate it into my site, I will use innerHTML to add the content into an existing pop-up source file.

Here was my solution:

<html>
<head>
<title>New Post Test</title>

<script language="JavaScript">

function openPreview()
{
	features = 'width=500, height=600, toolbar=no, menubar=no, resizable=no, location=no, directories=no, status=no';
	var popWin = window.open ('','Preview_Entry', features);

	var popTitleText = popWin.document.getElementById("title");
	var titleText = document.getElementById("title");
	var popAuthorText = popWin.document.getElementById("author");
	var authorText = document.getElementById("author");
	var popBodyText = popWin.document.getElementById("body");
	var bodyText = document.getElementById("body");
	var popTimestampText = popWin.document.getElementById("timestamp");
	var timestampText = document.getElementById("timestamp")

	popWin.document.writeln('Title: ' + titleText.value + '<br /> Author: ' + authorText.value + '<br /> Body: ' + bodyText.value + '<br /> Date: ' + timestampText.value + '<br />');

	popTitleText.value = titleText.value;
	popWin.document.close();
}

function openSubmit()
{
	document.myform.action = "news.publish.php";
	document.myform.submit();

	return true;
}

</script>

</head>

<?php

$timestamp = date("m/d/y g:i a");

?>

<body>

<form name="myform" method="post">
<input type="text" id="title" name="cf_title" value="Enter news-post title!" /><br /><br />
<input type="text" id="author" name="cf_author" value="Author name!" /><br /><br />
<textarea id="body" cols="30" rows="5" wrap="soft" name="cf_body">Body text goes here!</textarea><br /><br />
<input type="text" id="timestamp" name="cf_timestamp" value="<? echo $timestamp; ?>" /><br />
<input type="button" value="Preview" onclick="openPreview();" />
<input type="button" value="Submit" onclick="return openSubmit();" />
</form>

</body>
</html>

KevinM1 · January 15, 2009

Whelp, I came up with a solution that I'm happy with and that's to simply transfer the values of the text-boxes by calling them up with getElementById. Thank you Nightslyr, if it wasn't for the code you sent me. I'd never have come up with this solution.

When I go to integrate it into my site, I will use innerHTML to add the content into an existing pop-up source file.

Here was my solution:

<html>
<head>
<title>New Post Test</title>

<script language="JavaScript">

function openPreview()
{
	features = 'width=500, height=600, toolbar=no, menubar=no, resizable=no, location=no, directories=no, status=no';
	var popWin = window.open ('','Preview_Entry', features);

	var popTitleText = popWin.document.getElementById("title");
	var titleText = document.getElementById("title");
	var popAuthorText = popWin.document.getElementById("author");
	var authorText = document.getElementById("author");
	var popBodyText = popWin.document.getElementById("body");
	var bodyText = document.getElementById("body");
	var popTimestampText = popWin.document.getElementById("timestamp");
	var timestampText = document.getElementById("timestamp")

	popWin.document.writeln('Title: ' + titleText.value + '<br /> Author: ' + authorText.value + '<br /> Body: ' + bodyText.value + '<br /> Date: ' + timestampText.value + '<br />');

	popTitleText.value = titleText.value;
	popWin.document.close();
}

function openSubmit()
{
	document.myform.action = "news.publish.php";
	document.myform.submit();

	return true;
}

</script>

</head>

<?php

$timestamp = date("m/d/y g:i a");

?>

<body>

<form name="myform" method="post">
<input type="text" id="title" name="cf_title" value="Enter news-post title!" /><br /><br />
<input type="text" id="author" name="cf_author" value="Author name!" /><br /><br />
<textarea id="body" cols="30" rows="5" wrap="soft" name="cf_body">Body text goes here!</textarea><br /><br />
<input type="text" id="timestamp" name="cf_timestamp" value="<? echo $timestamp; ?>" /><br />
<input type="button" value="Preview" onclick="openPreview();" />
<input type="button" value="Submit" onclick="return openSubmit();" />
</form>

</body>
</html>

Well, I'm happy I was of some help. This little endeavor reminded me why I hate dealing with pop-ups.

Sign In

[SOLVED] Preview Popup From Form Data

Recommended Posts

kneifelspy

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

kneifelspy

Link to comment

Share on other sites

kneifelspy

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

kneifelspy

Link to comment

Share on other sites

kneifelspy

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

kneifelspy

Link to comment

Share on other sites

kneifelspy

Link to comment

Share on other sites

KevinM1

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information