So I know that when you put a URL in the action of an HTML form it will send the users to that url. I also added in the target attribute target="_blank" to open the new URL in a new window. But I want to close that window and stay on the original site where the form was submitted form. I tried to do this by naming the target window and closing it but that didn't work out. I am wondering if there is a simple way to do this.

<form name="leds" id="ledSend" method="get" target="newWindow" action="">
Lamp Control: <input type="radio" name="led" value="0" checked>Off
              <input type="radio" name="led" value="1">On<br>
How long should the Lights stay on? <input type="text" name="timer" value="10">seconds<br>
Your name? For Our Records <input id="name" type="text" name="user" placeholder="Your name here"><br>
<input type="submit" value="Update!" onclick="alert(theInput.value +', You are about to change the Light! Keep in mind that there will be about a 2 second delay on the LiveStream.')"/>
<script>
var theInput = document.getElementById("name");
</script>
</form>

<script>
newWindow.close();
</script>

So I know that when you put a URL in the action of an HTML form it will send the users to that url. I also added in the target attribute target="_blank" to open the new URL in a new window. But I want to close that window and stay on the original site where the form was submitted form. I tried to do this by naming the target window and closing it but that didn't work out. I am wondering if there is a simple way to do this.

<form name="leds" id="ledSend" method="get" target="newWindow" action="https://agent.electricimp./NkzPvVKeHshT">
Lamp Control: <input type="radio" name="led" value="0" checked>Off
              <input type="radio" name="led" value="1">On<br>
How long should the Lights stay on? <input type="text" name="timer" value="10">seconds<br>
Your name? For Our Records <input id="name" type="text" name="user" placeholder="Your name here"><br>
<input type="submit" value="Update!" onclick="alert(theInput.value +', You are about to change the Light! Keep in mind that there will be about a 2 second delay on the LiveStream.')"/>
<script>
var theInput = document.getElementById("name");
</script>
</form>

<script>
newWindow.close();
</script>

• javascript
• html
• forms

• 1 There's something awesome called AJAX. Will make what you want – baao Commented Nov 25, 2014 at 20:46
• 1 Why Ajax? Simple solution is to not have target attribute at all – Mr. Alien Commented Nov 25, 2014 at 20:46
• If you want to approach it this way, the safer thing to do is to invoke the close call from the action window after the back end did it's thing.... use php or something to echo the last 3 lines back. Really though, for things like this, you should use AJAX. – BReal14 Commented Nov 25, 2014 at 20:47
• @Mr.Alien The goal seems to be that the page where the actual form is shouldn't reload or change location. – JJJ Commented Nov 25, 2014 at 20:48
• @Juhana I think he doesn't want to open that on a new tab/window, anyways question is unclear to me.... – Mr. Alien Commented Nov 25, 2014 at 20:50

3 Answers 3

another solution, besides the ajax obvious one is using an inner hidden iframe as the target property of the form element. this way the form will open in a hidden inner element. e.g.:

<form id="eFrm" target="ifrm1">
</form>
<iframe id="ifrm1" name="ifrm1" style="display:none"></iframe>

Here is what you need, simply adjust it to your needs, create a php file that gets called within the action and let it do what you would do with your form - exactly the same way, but stay on the same page:

$("#ajaxform").submit(function(e)
    {
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax(
        {
            url : formURL,
            type: "POST",
            data : postData,
            success:function(data) 
            {
                //data: return data from server
            }

        });
        e.preventDefault(); //STOP default action
        e.unbind(); //unbind. to stop multiple form submit.
    });

    $("#ajaxform").submit();

You need to include jQuery to your file to use this!

As you are using GET in your form - with this submission you will get the data in your $_POST.

AJAX request suggested by baao is the way to go, but it has a caveat. The browser won't allow to pass your AJAX request if the target server is on a different domain. To solve the problem it should provide correct CORS headers.

If target server is out of your control, you can make a proxy on your own server and call it instead of the current 3rd-party server. This will allow you to simplify things even further by making proxy at the same address as the page with the form.