Submit Form, then open new window and close popup

Question

I have a login form that appears in a popup window. I would like to write some javascript (not sure if I should use regular js or Ajax) that will open a new full size window after the form is submitted, then close the current log in form popup window. How can I accomplish this? I know that my issue is, under normal circumstances you can't do anything else after a form submit because the page refreshes/redirects, etc. Thank you for any help or solutions to my problem.

I have looked at this question: Submit a form in a popup, and then close the popup but can't make sense of it, or if it applies to my problem.

Form:

<form name="catseczoneform30738" onSubmit="return checkWholeForm30738(this)" method="post" action="https://redlakewalleye.worldsecuresystems.com/ZoneProcess.aspx?ZoneID=12695&Referrer={module_siteUrl,true,true}&OID={module_oid}&OTYPE={module_otype}">
            <div class="form">
              <div class="item">
                <label for="SZUsername">Username</label>
                <br />
                <input class="cat_textbox_small" type="text" name="Username" id="SZUsername" maxlength="255" />
              </div>
              <div class="item">
                <label for="SZPassword">Password</label>
                <br />
                <input class="cat_textbox_small" type="password" name="Password" id="SZPassword" maxlength="255" autocomplete="off" />
              </div>
              <div class="item">
                <input type="checkbox" name="RememberMe" id="RememberMe" />
                <label for="RememberMe">Remember Me</label>
              </div>
              <div class="item">
                <input class="cat_button" type="submit" value="Log in" name="submitButton" />
              </div>
            </div>
            <script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
            <script type="text/javascript">
//<![CDATA[
    function checkWholeForm30738(theForm){
    var why = "";
    if (theForm.Username) why += isEmpty(theForm.Username.value, "Username");
    if (theForm.Password) why += isEmpty(theForm.Password.value, "Password");
    if (why != ""){
        alert(why);
        return false;
    }
    window.open('http://www.redlakewalleye.com/promotional/activation-form','_blank');
    theForm.submit();
    // window.close(); here?
    return false;
    }
//]]>
            </script>

        </form>

If your login opens in a popup, why not just close the popup and modify the URL in the parent window, rather than opening a new window? (From how you've described it, you would have two full windows open at once...usability wise this is probably going to be a bad thing) — Tim, Nov 12 '13 at 15:47
@Tim I don't mind doing it that way, but I am not sure how to modify the parent window. Would it be something like document.location.href = "/url-here"; ? — Phorden, Nov 12 '13 at 16:03
It should be something along the line of document.opener.location.href, where opener is the window that spawned the popup, I think. It's been a while since I've done this. I personally try to keep away from popups when possible (in my experience, users have hated popups - but this isn't the case in every environment) — Tim, Nov 12 '13 at 17:09
Here's a sample of what I'm talking about - instead of a remote, you'd have your login form...http://www.javascriptkit.com/script/cut105.shtml — Tim, Nov 12 '13 at 17:12
@Tim I have it half way there. I already have a link on the sister site that creates a popup window of the login form at a certain size. It is not a full-size window. This allows people to type their credentials in from the sister site and makes doing so a bit easier. — Phorden, Nov 12 '13 at 21:21

score 0 · Answer 1 · answered Nov 12 '13 at 15:19

0

Put this BEFORE theForm.submit():

var popup = window.open('http://www.redlakewalleye.com/promotional/activation-form','_blank');
theForm.onsubmit = function() {
    popup.close();
}

answered Nov 12 '13 at 15:19

Henrique Barcelos

7,670
1
41
66

There is a couple of issues with this. First, it looks like it is trying to close the window I just opened. Also, the form does not want to finish submitting before the new window is opened, so the user sees a window that is denying them access because they are not logged in since the window was opened before the form was submitted. – Phorden Nov 12 '13 at 15:27
I think I misunderstood what you want, but that's the way of closing a window on a form submit. What is the window you want to close? – Henrique Barcelos Nov 12 '13 at 15:28
I would like to close the window with the form after opening a new window at the /promotional/activation-form path. I am having issues with the form submitting first though because it needs to submit before the new window is open. It is logging a user into a secured page. – Phorden Nov 12 '13 at 15:32
I think this can't be done the way you want, because the form will not be sent by the time you open a new window. You'll have to do this on a single window. – Henrique Barcelos Nov 12 '13 at 16:02
I wouldn't mind doing a window resize, but I feel like that becomes an issue of whether the browser will allow it. – Phorden Nov 12 '13 at 16:04
The problem is not the resize, the problem is that you will never be logged in before you send the request, so, there's no way of doing this... You should do this with ajax and a overlay form on a single window... – Henrique Barcelos Nov 12 '13 at 16:05
Unfortunately, that is not a good way for me to implement this form. The reason for the popup is so that a user can type in their credentials without having to go to a separate tab or full-size window. They also can't be logged in before, because this form pop-up is taking them from one sister site to another, and they can't log in from the sister site. Thank you for your advice though. – Phorden Nov 12 '13 at 16:13
But what I'm saying is that instead of openning a new window to log in, you just add a form element on an overlay like [this](http://blog.echoenduring.com/2011/09/01/improving-the-login-form-experience/) – Henrique Barcelos Nov 12 '13 at 16:20

score 0 · Answer 2 · answered Nov 12 '13 at 15:42

0

In the new window, the one opened by your login form, write this:

<script type="text/javascript">
if(window.opener != null) {
  window.opener.close(); // close login form
}
</script>

answered Nov 12 '13 at 15:42

arvic.rivera

673
5
6

Submit Form, then open new window and close popup

2 Answers2