asked on 7/21/2008

Preview window from form variables

Hi folks

I am having problem with a bit of ASP/JS/HTML code...

I have a page with multiple fields in different forms. For two of the forms I would like to be able to click a link to open up a preview page so that I can see what the page will look like before submitting it to the Database. (The data being passed to the preview page WILL contain HTML tags.)

I have got a semi working solution, however when I use the "Preview..." link the item will no longer submit to the database when clicking on the "Submit" button. Instead the preview page keeps popping up... If however I don't click the "Preview..." link the form submits to the Database successfully!

"Preview.asp" page simply uses:
strItemTitle = Request("TestTitle")
strItemDescription = Request("TestDescription")
To grab the text from the "addnew.asp" page...

"TestDescription" field can hold up to 3000 characters so I can't use a query string I believe...

On submitting the "Addnew.asp" page there is ASP code to insert the data into a SQL Database.

Thanks in advance :-)

// In the head tag...
function Preview2() {
     var obj;
      obj = document.getElementById("NewTest");
      obj.action = 'preview.asp'; //your popup page
      //obj.method = 'get'; //or don't use this line if you don't need to change method
      obj.target = '_blank';
	  //obj.target.window.width = '1000'
      obj.submit();
}
 
<!-- In the body. One of several forms-->
<form action="addnew.asp" method="post" name="NewTest" id="NewTest">
<input name="TestTitle" type="text" class="TableBody" id="TestTitle" size="100" maxlength="100" />
<textarea name="TestDescription" cols="100" rows="10" id="TestDescription"></textarea>
<!--And a link to call the preview window-->
<a href="#TestItem" class="TableBodyLink" onclick="Preview2();">Preview...</a>
<!--And a submit button-->
<input name="Submit" type="submit" value="Submit" />

Last Comment

7/22/2008

7/21/2008

Because you are changing the action to the preview page, and never setting it back to addnew.asp page:

obj.action = 'preview.asp'; //your popup page

Change the action back to addnew when you click the submit button.

scrathcyboy

7/21/2008

The best way to do this is to run the preview application with the javascript "onClick();" handler, then let the form submit with the normal submit button -- this is how you do it --

You would have a javascript function Preview, which is called with the onClick() handler, as below

function Preview() {
.... do your stuff here ....
return false;
}

The reason why you want to return false is because if the function returns true (see Form setup below) then the form will submit. So if you just want to PREVIEW and nothing else, you need to return false.

If you want to preview AND submit, you return true. More intelligently, you construct the Preview function to return true if all fields pass, and it submits, but if all fields do not pass a test (like being blank), then you return false. Hence the form ONLY submits when everything is just as you want it.

<FORM name="form1" method="POST" action="your_asp.asp" target="_self" onSubmit="javascript: return Preview();">

Open in new window

Windinthewillows

7/21/2008

ASKER

Thanks both...
However I may need to preview the page several times before finally submitting it to the Database so scrathcyboy's solution is posiibly not the one...

golfDoctor can you advise the best place and way to set it back please? In the "function Preview2" code, in the form variables or using the "Submit" button?

Cheers

golfDoctor

7/21/2008

in the submit button onclick event, with new function to change the action back (or revise existing function)

golfDoctor

7/21/2008

Like this: (haven't tested)
 
// In the head tag...
function Preview2() {
     var obj;
      obj = document.getElementById("NewTest");
      obj.action = 'preview.asp'; //your popup page
      //obj.method = 'get'; //or don't use this line if you don't need to change method
      obj.target = '_blank';
          //obj.target.window.width = '1000'
      obj.submit();
}
 
function setback() {
     var obj;
      obj = document.getElementById("NewTest");
      obj.action = 'addnew.asp'; //your popup page
      obj.target = '_self';
}
 
<!-- In the body. One of several forms-->
<form action="addnew.asp" method="post" name="NewTest" id="NewTest">
<input name="TestTitle" type="text" class="TableBody" id="TestTitle" size="100" maxlength="100" />
<textarea name="TestDescription" cols="100" rows="10" id="TestDescription"></textarea>
<!--And a link to call the preview window-->
<a href="#TestItem" class="TableBodyLink" onclick="Preview2();">Preview...</a>
<!--And a submit button-->
<input name="Submit" type="submit" value="Submit" onclick="setback()"  />

Open in new window

ASKER CERTIFIED SOLUTION

golfDoctor

7/21/2008

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

Windinthewillows

7/22/2008

ASKER

Thanks very much - that did the trick! I can go to bed a happy man now :-)

scrathcyboy

7/22/2008

"However I may need to preview the page several times before finally submitting it to the Database so scrathcyboy's solution is posiibly not the one..."

Totally erroneous assumption -- you simply set to false for as long as you are testing it, then set true when it works, or validates. Surprised how you could write off such an elegant solution without even trying it.