Après avoir soumis un formulaire POST, ouvrez une nouvelle fenêtre affichant le résultat

149

La demande de publication JavaScript comme une soumission de formulaire vous montre comment soumettre un formulaire que vous créez via POST en JavaScript. Voici mon code modifié.

var form = document.createElement("form");

form.setAttribute("method", "post");
form.setAttribute("action", "test.jsp");

var hiddenField = document.createElement("input");  

hiddenField.setAttribute("name", "id");
hiddenField.setAttribute("value", "bob");
form.appendChild(hiddenField);
document.body.appendChild(form); // Not entirely sure if this is necessary          
form.submit();

Ce que je voudrais faire, c'est ouvrir les résultats dans une nouvelle fenêtre. J'utilise actuellement quelque chose comme ceci pour ouvrir une page dans une nouvelle fenêtre:

onclick = window.open(test.html, '', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');

javascript html post

— user4642212
source

2

Notez que document.body.appendChild(form) c'est nécessaire, voir stackoverflow.com/q/42053775/58241

— benrwb

220

Ajouter

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

ou

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

à la définition de votre formulaire.

— liggett78
source

N'oubliez pas d'ajouter l'ID d'attribut à l'élément de formulaire, sinon cela ne fonctionne pas dans le navigateur Safari même si le bloqueur de fenêtres contextuelles est désactivé. <form id = "popupForm" target = "_ blank" ...> </form>

— Naren

131

Si vous souhaitez créer et soumettre votre formulaire à partir de Javascript tel que dans votre question et que vous souhaitez créer une fenêtre contextuelle avec des fonctionnalités personnalisées, je vous propose cette solution (j'ai mis des commentaires au-dessus des lignes que j'ai ajoutées):

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

// setting form target to a window named 'formresult'
form.setAttribute("target", "formresult");

var hiddenField = document.createElement("input");              
hiddenField.setAttribute("name", "id");
hiddenField.setAttribute("value", "bob");
form.appendChild(hiddenField);
document.body.appendChild(form);

// creating the 'formresult' window with custom features prior to submitting the form
window.open('test.html', 'formresult', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');

form.submit();

— Marko Dumic
source

18

+1 Mieux que la réponse acceptée, car elle met en fait le résultat dans la fenêtre contextuelle avec les options souhaitées par l'OP.

— Nicole

Ne fonctionne pas pour moi sur IE - il crée une nouvelle fenêtre avec les attributs spécifiés, puis charge les résultats dans une autre nouvelle fenêtre, laissant la fenêtre précédente vide.

— mjaggard

1

@mjaggard: Qu'avez-vous ajouté? Cela pourrait valoir la peine de suggérer une modification de cette réponse.

— Michael Myers

3

@SaurabhNanda Autant que je sache, l' targetattribut sur l' formélément n'est pas obsolète dans HTML 4.01 Transitional et doit apparemment rester dans HTML 5 .

— Marko Dumic

1

Un avertissement: j'ai dû joindre mon formulaire au corps du document avant que cela fonctionne (dans FF 17). Créer un fragment et essayer de résumer cela n'a pas fonctionné.

— voidstate

8

var urlAction = 'whatever.php';
var data = {param1:'value1'};

var $form = $('<form target="_blank" method="POST" action="' + urlAction + '">');
$.each(data, function(k,v){
    $form.append('<input type="hidden" name="' + k + '" value="' + v + '">');
});
$form.submit();

— Luchaninov
source

Est-ce que je manque quelque chose ou avez-vous toujours besoin de .appendla balise close form?

— theJollySin

Je pense que cela est incomplet après avoir ajouté le formulaire, vous devez le supprimer pour une meilleure pratique.

— ncubica

@theJollySin: En appelant jQuery sur la balise, il se transforme en un véritable élément DOM et se ferme lorsqu'il est inséré dans le DOM.

— Janus Troelsen

1

Je pense qu'il manque un appendTo ('body') et la dernière ligne devrait être écrite comme $form.appendTo('body').submit();

— suit

1

Je connais cette méthode de base:

1)

<input type=”image” src=”submit.png”> (in any place)

2)

<form name=”print”>
<input type=”hidden” name=”a” value=”<?= $a ?>”>
<input type=”hidden” name=”b” value=”<?= $b ?>”>
<input type=”hidden” name=”c” value=”<?= $c ?>”>
</form>

3)

<script>
$(‘#submit’).click(function(){
    open(”,”results”);
    with(document.print)
    {
        method = “POST”;
        action = “results.php”;
        target = “results”;
        submit();
    }
});
</script>

Travaux!

— Edu Carrega
source

3

c'est avec jquery! il demande du pur JS

— Aviatrix

1

Solution de travail la plus simple pour la fenêtre de flux (testée sur Chrome):

<form action='...' method=post target="result" onsubmit="window.open('','result','width=800,height=400');">
    <input name="..">
    ....
</form>

— Grigory Kislin
source