Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts

    how call validation script for form in pop up

    "<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

    LT


    THis is the start of my script

    Code:
    <script type="text/javascript">
    var newWindow;
    function subWrite() {
    	newWindow = window.open("","","status,height=500,width=700") 
    	//bring subwindow to front
    	newWindow.focus();
    	//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)"';
    Last edited by low tech; 07-16-2010 at 01:38 PM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    Thanks
    Aerospace_Eng_
    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
    LT
    Last edited by low tech; 07-16-2010 at 01:51 PM.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    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:-)

    LT

  • #6
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    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'


    Code:
    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.

    Code:
    function inspectBox(form) {
    	alert("about to check");
    	if (document.getElementById('tswcallme').checked) {
    	document.getElementById('tswmobile').disabled=false;
    	document.getElementById('tswmobile').style.backgroundColor='white';
    	document.getElementById('tswmobile').focus();
    	} else {
    		document.getElementById('tswmobile').disabled=true;
    		document.getElementById('tswmobile').style.backgroundColor='#666666';
    		document.getElementById('tswmobile').value = "";  
    	}
    }
    function resetThis(form) {
    		document.getElementById('tswmobile').disabled=true;
    		document.getElementById('tswmobile').style.backgroundColor='#666666';
    		document.getElementById('tswmobile').value = "";  
    }
    any ideas anyone?

    LT

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    This is really basic: The <form> is on another page, in another window.

    You are able to invoke the function inspectBox because you use
    Code:
    opener.inspectBox(this.form)
    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
    Code:
    opener.inspectBox(this.form)
    That is, the this refers to the <input type="checkbox" name="callme"... that is *IN* the popup window.

    But *THIS* line:
    Code:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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:
    Code:
    function inspectBox(form) 
    {
        var tm = form.tswmobile;
    
        if (form.tswcallme.checked) 
        {
            tm.disabled=false;
            tm.style.backgroundColor='white';
            tm.tswmobile.focus();
        } else {
            tm.disabled=true;
            tm.style.backgroundColor='#666666';
        }
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    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.

    LT
    ps
    sorry if this is painful for you

  • #10
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    Old Pedant

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

    So now onto the DIV overlay or similar method.

    LT

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Quote Originally Posted by low tech View Post
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    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)?

    Code:
    <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";}
    }
    </script>

    This func is in validate js.
    Code:
    function resetThis() {
    		document.getElementById('tswmobile').disabled=true;
    		document.getElementById('tswmobile').style.backgroundColor='#666666';
    		document.getElementById('tswmobile').value = "";  
    }

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

    thanks
    LT

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Yes, reset() is part of the w3c spec.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    low tech (07-18-2010)

  • #14
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    Thanks for all the feedback and help Old Pedant, much appreciated.

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

    It's also helping me learn a lot.

    LT

    End thread


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •