How to Do a Post Request in HTML Without Opening a New Tab

How to do a POST request in HTML without opening a new tab

<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<body>

<form action="http://google.ca" id='idForm'>
      <div>
        <button type='submit' >post</button>
      </div>
     </form>
  </body>  
<script>

    $("#idForm").submit(function(e) {

        var form = $(this);
        var url = form.attr('action');

        $.ajax({
               type: "POST",
               url: url,
               data: form.serialize(), // serializes the form's elements.
               success: function(data)
               {
                   alert(data); // show response from the php script.
               }
             });

        e.preventDefault(); // avoid to execute the actual submit of the form.
    });

</script>
</html>

Submitting an HTML form without opening a new window

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.

Submitting form without opening new window or tab

So while reading around more, and trying to find a way to do the original method I wrote about above, I learned that it is possible to set the target of a form to an iframe. So to solve my issue above, created this iframe...

<iframe name="formSubmitFrame" name="formSubmitFrame" tile="Holds Submitted form data" rel="nofollow" class="d-none"></iframe>

and had it set to not display anywhere. Then, I set the target of my iframe to "formSubmitFrame".

This ultimately achieved my goal of submitting a form without the user seeing any window or tab changes.

Submit form without opening new tab/window (Angular)

So I found the solution. Instead of using a form I just used an iFrame to handle the logout.


const logoutFrame = document.createElement('iFrame')
logoutFrame.setAttribute('id', 'logoutFrame')
logoutFrame.setAttribute('style', 'display:none')
logoutFrame.setAttribute('src', URL)

document.body.appendChild(logoutFrame)

and removed the frame after a set timeout

Submitting form without opening new window or tab

<iframe name="formSubmitFrame" name="formSubmitFrame" tile="Holds Submitted form data" rel="nofollow" class="d-none"></iframe>

and had it set to not display anywhere. Then, I set the target of my iframe to "formSubmitFrame".

This ultimately achieved my goal of submitting a form without the user seeing any window or tab changes.

How to open a new tab with a post request from a component in Angular

I solved my problem using this dynamic form with JavaScript:

pay() {
    var form = document.createElement("form");
    form.target = "view";
    form.method = "POST";
    form.action = "https://sandbox.checkout.payulatam.com/ppp-web-gateway-payu";
    var params = {
      "merchantId": "508029",
      "accountId": "512321",
      "description": "Test PAYU"
    };

    for (var i in params) {
        if (params.hasOwnProperty(i)) {
          var input = document.createElement('input');
          input.type = 'hidden';
          input.name = i;
          input.value = params[i];
          form.appendChild(input);
        }
    }

    document.body.appendChild(form);
    form.submit();
    window.open('', 'view');
    }

This did what i wanted, problem solved!.

Make a link open a new window (not tab)

With pure HTML you can't influence this - every modern browser (= the user) has complete control over this behavior because it has been misused a lot in the past...

HTML option

You can open a new window (HTML4) or a new browsing context (HTML5). Browsing context in modern browsers is mostly "new tab" instead of "new window". You have no influence on that, and you can't "force" modern browsers to open a new window.

In order to do this, use the anchor element's attribute target^[1]. The value you are looking for is _blank^[2].

<a href="www.example.com/example.html" target="_blank">link text</a>

JavaScript option

Forcing a new window is possible via javascript - see Ievgen's excellent answer below for a javascript solution.

(!) However, be aware, that opening windows via javascript (if not done in the onclick event from an anchor element) are subject to getting blocked by popup blockers!

_{[1] This attribute dates back to the times when browsers did not have tabs and using framesets was state of the art. In the meantime, the functionality of this attribute has slightly changed (see MDN Docu)}

_{[2] There are some other values which do not make much sense anymore (because they were designed with framesets in mind) like _parent, _self or _top.}

How to Do a Post Request in HTML Without Opening a New Tab