One HTML Form, Two Submit Buttons, one to a pop up with POST data ... how?

[slyme]

Hi,

Very new to JavaScript so I'm sorry if this is a daft question, I have searched for answers first and could not find anything that works for me ... so ..

The task:

One html form with two submit buttons. On submit (save changes) posts back to the same page and updates a database. The other submit button (preview) should open a pop-up showing what the data would look like if the user should press save.

My efforts so far:

This might not look like much of an effort but, trust me, I took a long time to get this far!

I have figured out how to open the pop-out using this code:

<form action="index.php" method="post">
	<input type="text" name ="text_1" value="default" /><br />
	<textarea name="text_2">default</textarea><br />
	<input type="submit" value="preview" onclick="window.open('preview.php', '', 'width=400 height=500')" /><br />
	<input type="submit" value="save changes" />
</form>

How do I submit the form data to the pop up? I have arrived at some solutions using onsubmit in the form tag but that messes up the 'save changes' action.

Any help would be so gratefully received,

Simon.

[twiss]

If you want to open a seperate window, you'll have to create a page (in php, for example) that views the info you throw at it via GET. I don't really recommend this, though, because there's a limit on how many characters you can send with GET (and especially on IE that limit is very low).
So, I would use AJAX. Same story, really, create a page that gives back the HTML for the text you throw at it (with POST), and put that HTML in a <div/>. It's easiest to look for a good AJAX library (for example jQuery, but perhaps it's a bit overkill as it includes much more than just AJAX).

[slyme]

Thanks Twiss,

I figured out the GET option ... two problems ... one input will often hold far too much data and also I have real difficulties reading the contents of that input because it is using something called TinyMce as a sort of HTML editor and this really complicates things ... I have to submit the form before I can reliably read the content of that input.

I am already using jQuery in the page so maybe the answer is there ... I will do a bit more research, I'm guessing I'm gonna be back here asking more questions so I won't close this thread yet.

Any more comments/advice/ pointers greatly appreciated,

Simon.

[twiss]

Perhaps this helps: http://tinymce.moxiecode.com/wiki.php/How-to_load/save_with_Ajax_in_TinyMCE

[almostbob]

given that the data is in the fields and the format is known, why submit
preview could be a layer in the current page with the correct css to display the information as it appears in the database
something like

<input type='button' value='Preview' onclick="document.getElementbyID('preview').style='display:block;'">
<!-- and -->
<div id='preview' style='/*out in the css this is just a sample*/ z-index:100; bckground:grey; width:100%; height=100%; top:0; left:0;'>some html to layout the page and populate some data spaces with the value of the input fields<br>
and a button onclick=display:none; </div>

popup windows dont work, too many have them blocked by default, layers in the current window operate without being blocked,

like the kudos window above right on this post

Boy is that obvious :P

[slyme]

Perhaps this helps: http://tinymce.moxiecode.com/wiki.php/How-to_load/save_with_Ajax_in_TinyMCE

I checked it out .... I could not figure it out Twiss, but thank you all the same ... I get the impression that this would do what I want it to but I don't really understand it .... I am a PHP'er and very new to JavaScript.

[twiss]

Okay, you can just get the content of your tinyMCE thing by calling .get('content') on the tinyMCE object. Once you have that, you can display it in some box:

document.getElementById('preview').innerHTML = tinyMCE.get('content').getContent();

Edit; forgot getContent().
Edit 2: you can also use:

tinyMCE.activeEditor.getContent()

[slyme]

popup windows dont work, too many have them blocked by default, layers in the current window operate without being blocked,

like the kudos window above right on this post

Boy is that obvious :P

Luckily, only two people will be using this page and they will be allowing popups ...

Unfortunately, I can't use your marvelous solution for this one(but I will be using it elsewhere thanks very much!).

For all sorts of reasons, I have to go to a different page to display the preview - it just would not work in the same page as the edit/save routine.

A pop up would be a most elegant solution but if I can't do that then I'm going to have to do it all server side by passing the variables from page to page as we go.

I'm going to stick at it for a bit ... as ever, all comments/advice most welcome.

Now, I know I'm gonna be red faced for asking this but I reckon I'd be more stupid if I didn't ask a question when I don't understand something, so, ... kudos window ... ? ... what kudos window? :-)

thanks,

Simon.

[twiss]

What you could do is have a shadow form, something like this:

<form method="post" id="preview" target="_blank" action="preview.php">
  <input type="text" name="title">
  <textarea name="content"></textarea>
</form>

And then, if you click the preview button, write a script that puts the contents of you real form into this one and submit it.
Edit: perhaps it's better if you use target="preview", so that if you click preview again, it comes in the same window.

[slyme]

What you could do is have a shadow form, something like this:

<form method="post" id="preview" target="_blank" action="preview.php">
  <input type="text" name="title">
  <textarea name="content"></textarea>
</form>

And then, if you click the preview button, write a script that puts the contents of you real form into this one and submit it.
Edit: perhaps it's better if you use target="preview", so that if you click preview again, it comes in the same window.

This is where it all started for me Twiss .... I wrote two forms and filled one with hidden fields which mirrored the fields available to the user.

This form would submit to a pop up and the user facing form would post to the appropriate action page in the main window.

I used onchange to keep the hidden fileds in sync with the user facing ones. That's when I discovered that onchange didn't work for the TinyMce textareas.

A little bit of research on TinyMce and I found function that went in the tinyMCE.init which updated as required just like the onchange script that I had written.

Only thing is, it was very unreliable, sometimes it worked sometimes it didn't and the editor was often very buggy.

Hence the conclusion that I will have to use the same form for preview as well as save and I will have submit it to get a reliable result from those TinyMce textareas (there's up to four on a page).

Ah well ... I'm going to wrap it up for the day. I will give it one more day of trying before I go down the server side processing route.

Thanks for all your help Twiss,

all the best,

Simon.

[twiss]

Again, my suggestion would be not to update the shadow form onchange, but onclick (on the preview button). Edit: or onsubmit, of course, if you put the form around the preview button.