Page 1 of 1

Help: Submit form data to new window for news preview

Posted: Tue Aug 20, 2002 8:37 pm
by Kalar
I'm writing a news posting script. When a user goes to add a post I'd like to have an option to preview the post.

Now, it wouldn't be so bad if it was only one script that took care of preview/posting, but it isn't. The way I've designed it, I use one script to save the post to the DB and another script to preview the post in a parsed template [hence there being a different script].

But the preview window MUST open in a new window, submitting the values given in the form to the preview script [for parsing].

Does anyone have any idea how to do this?

Posted: Wed Aug 21, 2002 8:18 am
by enygma
forms can have a "target" attribute in the <form> tag:

<form action="foo.php" method=POST target=_new>

or something similar...

Posted: Wed Aug 21, 2002 10:34 pm
by Kalar
Yes, but the problem with doing that is the form is always submitted to a new window.

What I'm trying to do is somewhat similar to this message board itself. When you post a message, or a reply, you have two submission buttons for the same form: Preview and Submit.

The submit button will submit the post to the script, which will then save it to the DB. The preview button, though, doesn't save it, but instead displays it above the editing window [in it's own table].

What I need is for when the person clicks the Preview button, the form will be submitted to a new window for previewing, and not saved to the DB. I'm doing it this way [instead of the example phpBB method] because the preview is supposed to display the news in an independent, dynamic template to give a preview of what the post will look like when it's actually used on the website in final form.

Hope this clarifies it. Heck, at this point I just hope it's possible. =]

Posted: Mon Aug 26, 2002 1:13 am
by Takuma

Code: Select all

<html>
  <head>
    <script language="Javascript" type="text/javascript">
    <!--
      function redirect_page() &#123;
        var usr = document.register_form.username.value;
        var pwd = document.register_form.password.value;
        location.href = "preview.php?username="+usr+"&password="+pwd;
      &#125;
    //-->
    </script>
  </head>
  <body>
    <form method="POST" action="register.php" name="register_form">
      <input type="text" value="" name="username">
      <input type="text" value="" name="password">
      <input type="submit" value="Submit">
      <input type="button" value="preview" onClick="return False; redirect_page();">
    </form>
   </body>
</html>
I think this works.. but not sure.

Posted: Sat Aug 31, 2002 11:09 pm
by Kalar
The method you posted works great, except it only sends via a GET request, which doesn't suit my form data very well. But, it got me to thinking about this: why can't I just copy the data to an invisible form and then submit that form? I tried it, and it worked.

The Javascript I used on the button:

Code: Select all

<script language="javascript">
<!--
function previewMe()&#123;
document.invisible.subject.value = document.submitstuff.subject.value;
document.invisible.submit();
&#125;
// -->
</script>
The HTML looked a bit like this:

Code: Select all

<!-- Normal form for entering data. -->
<form name="submitstuff" method="POST" action="./submit.php">
<input type="text" name="subject" value="" />
<input type="submit" name="submit" value="Post News" />
<input type="button" value="Preview Post" onClick="previewMe()" />
</form>

<!-- Invisible form for previewing in pop-up window. -->
<form name="invisible" method="POST" action="./preview.php" target="_blank" style="margin: 0px; padding: 0px; border: 0px;">
<input type="hidden" name="subject" value="" />
</form>
This seemed to work perfectly, sending all of the data through a POST instead of a GET.

Posted: Sun Sep 01, 2002 2:08 am
by Takuma
Cool! :D

<FORM> target=xxx

Posted: Sun Sep 01, 2002 8:32 am
by gite_ashish
Hi,

For <FORM> tag's target attribute we can also have the values like:

<FORM target="anything">

We can write almost anything (any non-null, empty) value in the target attribute, and it will open new window.

I have tested this in IE5/Win... about other browsers can't say...


Regards,

Posted: Sun Sep 01, 2002 9:26 am
by Kalar
Very true.

There are 4 pre-defined target values that allow for different things to occur:
_blank - opens the form/link in a new, unnamed window
_self - opens the form/link in the same window as the calling page.
_parent - opens the form/link in the parent frame
_top - opens the form/link in the browser window, over-riding all frames that existed

As you can see, the target attribute is used mainly for frames.

But, if you wish to give it's own name, then you can direct all forms/links to a particular window by using the same name in the target attribute each time. For example, by making my target value == "preview", it would open the form into a new window [invisibly] named "preview". Then, each time a person clicks on the Preview button, it would load it into the same window without opening an entirely new window.

Also of note: these target values work in just about all graphical browsers, even those pre-4.0 browsers. I'm unsure how text-based browsers handle them, though.