View Full Version : how call validation script for form in pop up

low tech
07-16-2010, 12:56 PM
"<scr'+'ipt type="text/javascript" src="js/val_feedback_Email.js<\/scr'+'ipt>"

How should I call the js validation script for a feedback form that was document.written in a pop up?

I have a page which contains a button. Onclick it produces a pop up window that contains a small feedback form produced by document.write. This much works.

NOW I need to call the js validate script but nothing seems to work

I tried this is the head of the page
<script type="text/javascript" src="js/val_feedback_Email.js">

I tried this is the head of the doumnet.write part
"<scr'+'ipt type="text/javascript" src="js/val_feedback_Email.js<\/scr'+'ipt>"

How do I call the js script to validate the form in the pop up? Where if anywhere should it go?

I'm stumped

Any and all ideas welcomed


THis is the start of my script

<script type="text/javascript">
var newWindow;
function subWrite() {
newWindow = window.open("","","status,height=500,width=700")
//bring subwindow to front
//assemble content for new window
var newContent = '<html><head><title>ACES UK. Send us your Email</title>';
newContent += '</head><body>';
newContent += '<form action="feedback.php" method="post" name="feedback_1" id="feedback_1" onsubmit="return validate(this.form)"';

07-16-2010, 02:32 PM
If it is truly a popup, put the script in the page that you opened the popup from and then in the form use onsubmit="return opener.validate()" where the opener.validate() part is the opening window calling your validation function.

low tech
07-16-2010, 02:45 PM
Supreme Master coder!

Now you have said that, I'm not sure what classifies as a TRUE pop up ---- i'm trying the code above window.open so is that a pop up or not? If not what is it then? pop on? pop over?

ps I did try placing it in the head of the opening document but then nothing appeared in the pop open window? so I figured that wasn't right.

thanks for the info

Old Pedant
07-16-2010, 09:30 PM
WHY are you using document.write to create the popup contents????

Why not just use an HTML file and open that in the popup?

Yes, you are creating a true popup. A "popon" is a <div> that simply appears over the top of the other content. It's useful for cases where people have extreme popup blockers in place, as it is *not* a popup.

low tech
07-17-2010, 01:29 AM
Hi Old Pedant

I'm experimenting with ways to solve my problem

Once form is sent the thank you page apprears --- making the form available again via the back button. Also the contents are still there. I don't want this.

I'm trying to nake it so once form sent the form is not available UNLESS you start from begining ie click the feedback link (image whatever)

So I thought if the form was created via script then once they have sent the form I could close that window.

My other thought which sounds better than doing a pop up is to put the form in a hidden div. Click the link, div(form) appears, clears form if any date. onsubmit div closes.

I'll also try your suggestion of using a HTML file and opening that in a pop up.

Anyway, I'm just looking for a way to solve my problem and the only thing I know about cookies is that chocolate chip are pretty good:-)


low tech
07-17-2010, 02:42 AM
Ok trying to complete the pop experiment (since I've started it)

The js script is called from originating document.

this is the line calling the function in pop up -- I added 'opener'

newContent += '<td width="130" style="background-color:#B0B0B0;" ><input type="checkbox" name="callme" id="tswcallme" onclick=opener.inspectBox(this.form) /></td>';

It works because I get the alert in the function

This is the function which works when everything on same page

but now fails on line after alert --- object required -- any idea why? I checked the checkbox --- it called the function --- so what's the problem-- I've no idea.

function inspectBox(form) {
alert("about to check");
if (document.getElementById('tswcallme').checked) {
} else {
document.getElementById('tswmobile').value = "";
function resetThis(form) {
document.getElementById('tswmobile').value = "";

any ideas anyone?


Old Pedant
07-17-2010, 03:52 AM
This is really basic: The <form> is on another page, in another window.

You are able to invoke the function inspectBox because you use


The opener *IS* the MAIN PAGE. THat is, the one that indeed did window.open.

The only reason the main page can *SEE* the form in the popup is because you called with


That is, the this refers to the <input type="checkbox" name="callme"... that is *IN* the popup window.

But *THIS* line:

if (document.getElementById('tswcallme').checked)

is now referring to code *IN THE SAME WINDOW*. That is, document *MEANS* "the document of the current page/window."

If you wanted to refer to something in the popon, you would need a *reference* to the popup window to start from.

All of this is possible, but it's a lot of pain and trouble.

IF navigation (that is, the back button) is a real concern, then I strongly urge you to consider using "popON"--that is, the <div> that overlays the current page.

Old Pedant
07-17-2010, 03:59 AM
It *DOES* occur to me that if "tswmobile" and "tswcallme" are form fields, then you *COULD* make this work if you'd just stop using id's in form fields!!!

There is ALMOST NEVER a reason to give a form field an ID. (Exception: If you want to use <label for="someID">.)

Instead, just use its name!

MOST ESPECIALLY, if "tswmobile" and "tswcallme" are in the SAME FORM as
<input type="checkbox" name="callme" onclick="opener.inspectBox(this.form);"> then you can simply refer to them thus:

function inspectBox(form)
var tm = form.tswmobile;

if (form.tswcallme.checked)
} else {

low tech
07-17-2010, 04:25 AM
THanks Old Pedant

I knew my referencing was wrong --- but reading JS bible didn't really enlighten me how to reference back to the pop up.

I can see the pain and trouble now hahaha Anyway I'm gonna try your method of above post -- ie get rid of the id's --- and reference the form as you say.

I've tried the HTML file and opened it in pop up --- that was straightforward:-)

BUT I think I will go with the DIV overlay method as you suggest and put the rest down to good learning experience:-)

Is this mthod ok?
put the form in a hidden div. Click the link, div(form) appears, clears form if any date. onsubmit div closes.

sorry if this is painful for you

low tech
07-17-2010, 04:38 AM
Old Pedant

Yep the referencing method you gave at post #8 works just fine:-)

So now onto the DIV overlay or similar method.


Old Pedant
07-17-2010, 11:00 PM
Is this mthod ok?
put the form in a hidden div. Click the link, div(form) appears, clears form if any date. onsubmit div closes.

Not quite! If you submit the <form> then the *ENTIRE PAGE* will be CLEARED and a new page loaded from the server!

Two ways around this:

(1) Put the <form> into an <iframe> which is in turn in the <div>.
You still have the problem of cross-referencing window, because the code in the <iframe> *IS* in a different window!

(2) Use AJAX. Don't really "submit" the <form>. Instead, use JS code to build up a querystring by hand, call AJAX, get the response, do something with the response.

I prefer (1), but it does have the problem that a user hitting the BACK button while the <iframe> has focus won't necessarily get what he/she expects. It's an okay solution for some situations, not for others.

(2) Is the "ultimate" solution. Just more work than any of the others. You have to build up the query string for the AJAX GET (or POST, same kind of query string used for both) yourself, no help from the browser.

And, of course, neither of these solutions work if the user disables JavaScript. But, then, your popup probably won't work without JS, either.

low tech
07-18-2010, 02:13 AM
Thanks Old Pedant (see test site if i'm unclear)

my question is further down.

OH I haven't yet got around to removing all the ids from form but will do next:-(

Ok so I have this solution which I find acceptable.

1 Email page opens in NEW window.with info about email content and other stuff.

2 the email form is HIDDEN

3 Click on link to open(or close) form --- triggers function to CLEAR form and SHOW form

4 submit sends form, clears page and a thank you (or error) page is shown --- here they are asked to either close window or use back button to make another enquiry (stage 3)

It's working BUT I have one question:-)

Is the way I have reset the form right (or even legal)?

<script type="text/javascript">
function hideIt() {
document.getElementById("feedback_1").reset(); // this works but is it right?
resetThis(); // calls a function that resets the greyed out area of tel num see below for func
var el=document.getElementById("fbm");
if (el.style.display =="none") {
el.style.display ="block";
} else
{el.style.display ="none";}

This func is in validate js.

function resetThis() {
document.getElementById('tswmobile').value = "";

Once this is cleared up -- i'm done I think:-)


Old Pedant
07-18-2010, 04:16 AM
Yes, reset() is part of the w3c spec.

low tech
07-18-2010, 05:29 AM
Thanks for all the feedback and help Old Pedant, much appreciated.:thumbsup:

I checked out overlays too which looked great but for now this method will suffice.

It's also helping me learn a lot.


End thread