After Submitting a Post Form Open a New Window Showing the Result

After submitting a POST form open a new window showing the result

Add

<form target="_blank" ...></form>

or

form.setAttribute("target", "_blank");

to your form's definition.

Display Results of Form Submission on New Tab or Window

You are never submitting the form.

You have an event handler that, when the form starts to submit, sets location and prevents the normal form submission.

Use window.open(url) instead of that if you want to open a new window.

How to submit form to new window?

I've marked this as duplicate because I thought your problem was about how to send a form to a popup window. Here is how to do it without using the onsubmit event:

var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", xxx);

function submitToPopup(f) {
    var w = window.open('', 'form-target', 'width=600, height=400, any-other-option, ...');
    f.target = 'form-target';
    f.submit();
};

document.body.appendChild(form);

submitToPopup(form);

So instead of using the onsubmit event to create the popup from there, you create it first, just before sending the form, and then send the form to it.

Open a new window & then submit form

I would keep the '_blank' to trigger the new tab/window and the use jQuery and Ajax to submit the form...

A standard html page with a form...

HTML

<form id="myForm">
    <input name="input1" type="text" value="somevalue1"/>
    <input name="input2" type="text" value="somevalue2"/>
    <a href="whereEverYouWantToGo.php" target="_blank" id="myFormButton">Send</a>
</form>

<input id="result1" value=""/> <?php //use if only wanting to get result back ?>

jQuery used for this page...

jQuery

$(document).ready(function() {
    $(document).on("click","#myFormButton", function() {

        var str = $("#myForm").serialize(); // This grabs all your form inputs by name and creates a string e.g. input1=someValue1&input2=someValue2 which you can use later for grabbing the $_GET variables.

        $.ajax({
        cache: false,
        url: 'ajax/your-ajax-page-to-submit-the-form.php?'+str,            
        type: 'POST',
        dataType: 'json',
        success: function(result) {
            alert("success");

            // Can get data from Ajax file by using array cretaed in the file (see below)
            $('#result1').val(result['result1_from_ajax']);

        },
        error : function () {
            alert("error");
        }
    });
});

Now the Ajax page...

your-ajax-page-to-submit-the-form.php

ob_start(); //at the very beginning start output buffereing

$var_input1 = mysqli_real_escape_string($dbc, $_GET['input1']);
$var_input2 = mysqli_real_escape_string($dbc, $_GET['input2']);

$q = "INSERT INTO my_table (column1, column2) VALUES ('$input1', '$input2')";
$dbc = mysqli_connect('localhost', 'root', 'password', 'DB_Name') OR die('Could not connect because: '.mysqli_connect_error()); 
$r = mysqli_query($dbc, $q);

// bof if you want to output any results or values back to jQuery
$var = array(
    'result1_from_ajax' => $var_input1,
    'result2_from_ajax' => $var_input2
);
// eof if you want to output any results or values back to jQuery

// Must have
ob_end_clean(); // right before outputting the JSON, clear the buffer.
echo json_encode($var);

How to give the choice to open a new window or stay on the same on form submit?

You can't submit a form when the user right-clicks and chooses "Open in new window."

You might implement a drop-down button where the main part submits to the current window but there's a part that's a drop-down arrow offering the choice to submit to a new window (like this example from Bootstrap).

The "submit to new window" would update target before submitting, obviously.

Here's a really crude example (on jsFiddle — Stack Snippets don't allow forms in any way or shape):

<form action="https://google.com/search">
    <div>
        <label>Search: <input type="text" name="q" value="kittens"></label>
    </div>
    <div>
        <div class="button-menu">
            <input type="submit" class="current-window" value="Submit">
            <span class="menu-toggler">V</span>
            <div class="button-menu-content">
                <input type="submit" class="new-window" value="Submit to New Window">
            </div>
        </div>
    </div>
</form>

JavaScript:

$(".button-menu .menu-toggler").on("click", function() {
    $(this).closest(".button-menu").toggleClass("menu-open");
});
$(".new-window").on("click", function() {
    var form = $(this).closest("form");
    form.prop("target", "_blank");
});
$(".current-window").on("click", function() {
    var form = $(this).closest("form");
    form.prop("target", "_self");
});

Obviously, again, that's very crude, your UI toolkit (whether homebrew or one of the standard ones) will let you make it look a lot smarter.

(How) can I open the result of a form submission in a new window?

<form ... target="windowName">

or

<form ... target="windowName" onsubmit="window.open(this.action, this.target, '...attributes...');return true;">

...attributes... can consist of the stuff documented at the mozilla developer center or MSDN

Why form submit opens new window/tab?

Problem was in base tag. I had intentionally target="_blank" in tag, probably because I copied the example from w3schools :-/

---

Related Topics