So öffnen Sie ein neues Fenster beim Senden eines Formulars

127

Ich habe ein Übermittlungsformular und möchte, dass es ein neues Fenster öffnet, wenn Benutzer das Formular abschicken, damit ich es in der Analyse verfolgen kann.

Hier ist der Code, den ich verwende:

<form action="http://URL at mailchimp subscriber URL.com" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" onclick=window.open(google.html,'','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');>
    <label for="name">Your Name</label><input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
    <br/>
    <br/>
    <label for="email">Your Email </label><input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL">
    <br/>
    <br/>
    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="submit">
</form>
</div>
Michael Currie
quelle

Antworten:

271

Sie benötigen kein Javascript, sondern müssen lediglich ein target="_blank"Attribut in Ihr Formular-Tag einfügen.

<form target="_blank" action="http://example.com"
      method="post" id="mc-embedded-subscribe-form"
      name="mc-embedded-subscribe-form" class="validate"
>
Konstantinos
quelle
5
Wenn Sie das Ziel = _blank hinzufügen, benötigen Sie das Ereignis onClick nicht.
WhyNotHugo
5
Ich bin froh, auf diesen Beitrag gestoßen zu sein! Das Hinzufügen von target = "_ blank" zum Formular-Tag löste mein Problem, ein neues Fenster öffnen zu müssen!
Kaitlynjanine
3
Dies beantwortet nicht genau die Frage des OP, aber es ist die nützlichere Antwort im allgemeinen Gebrauch target="_blank"anstelle von Javascript
Kip
2
target = "blank" funktioniert einwandfrei. developer.mozilla.org/en-US/docs/HTML/Element/form
Eric
5
Zumindest in IE 11 erstellt target = "_ blank" einen neuen Tab im aktuellen Browserfenster, anstatt ein neues Browserfenster zu erstellen. IMHO unterscheidet sich ein neuer Tab von einem neuen Browserfenster
Marcelo Bezerra
33

In einer webbasierten Datenbankanwendung, die ein Popup-Fenster zum Anzeigen von Ausdrucken von Datenbankdaten verwendet, hat dies für unsere Anforderungen gut genug funktioniert (getestet in Chrome 48):

<form method="post" 
      target="print_popup" 
      action="/myFormProcessorInNewWindow.aspx"
      onsubmit="window.open('about:blank','print_popup','width=1000,height=800');">

Der Trick besteht darin, das targetAttribut auf dem <form>Tag mit dem zweiten Argument im window.openAufruf des onsubmitHandlers abzugleichen.

Awerealis
quelle
Dies gibt eine Kontrolle der Fenstergröße. Ausgezeichnet.
Chalky
beste Lösung auf dieser Seite, getestet und funktioniert perfekt.
Manny Ramirez
Dies ist genau das, wonach ich gesucht habe, als ich beim Senden ein PDF in ein separates Fenster generiert habe.
jrob007
7

onclickist möglicherweise nicht das beste Ereignis, an das diese Aktion angehängt werden kann. Jedes Mal, wenn jemand auf eine beliebige Stelle im Formular klickt, wird das Fenster geöffnet.

<form action="..." ...
    onsubmit="window.open('google.html', '_blank', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');return true;">
Grant Wagner
quelle
7

Für einen ähnlichen Effekt wie targetdas formtargetAttribut des Formulars können Sie auch das Attribut von input[type="submit]"oder verwenden button[type="submit"].

Von MDN :

... dieses Attribut ist ein Name oder ein Schlüsselwort, das angibt, wo die Antwort angezeigt werden soll, die nach dem Absenden des Formulars empfangen wird. Dies ist ein Name oder ein Schlüsselwort für einen Browserkontext (z. B. Tab, Fenster oder Inline-Frame). Wenn dieses Attribut angegeben wird, überschreibt es das Zielattribut des Formularbesitzers der Elemente. Die folgenden Schlüsselwörter haben eine besondere Bedeutung:

  • _self: Laden Sie die Antwort in denselben Browserkontext wie die aktuelle. Dieser Wert ist der Standardwert, wenn das Attribut nicht angegeben ist.
  • _blank: Laden Sie die Antwort in einen neuen unbenannten Browserkontext.
  • _parent: Lädt die Antwort in den übergeordneten Browserkontext der aktuellen. Wenn kein übergeordnetes Element vorhanden ist, verhält sich diese Option genauso wie _self.
  • _top: Laden Sie die Antwort in den Browserkontext der obersten Ebene (dh den Browserkontext, der ein Vorfahr des aktuellen ist und kein übergeordnetes Element hat). Wenn kein übergeordnetes Element vorhanden ist, verhält sich diese Option genauso wie _self.
alxs
quelle
Sehr nützlich, wenn Sie mehrere Senden-Schaltflächen haben.
hrvoj3e
Sieht so aus, als hätten sie diesen Inhalt von der Seite der Eingabeelemente entfernt. Ähnliche Informationen über das formtarget-Attribut finden Sie auf der Seite mit den Schaltflächenelementen: developer.mozilla.org/en-US/docs/Web/HTML/Element/…
peater
3

Der von Ihnen angegebene Code muss korrigiert werden. Im Formular-Tag müssen Sie den onClick-Attributwert in doppelte Anführungszeichen setzen:

"window.open('google.htm','','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');"

Sie müssen auch darauf achten, dass der erste Parameter von window.openauch in Anführungszeichen gesetzt wird.

Sourabh
quelle
2

Im Allgemeinen verwende ich ein kleines jQuery-Snippet global, um externe Links in einem neuen Tab / Fenster zu öffnen. Ich habe den Selektor für ein Formular für meine eigene Site hinzugefügt und es funktioniert bisher einwandfrei:

// URL target
    $('a[href*="//"]:not([href*="'+ location.hostname +'"]),form[action*="//"]:not([href*="'+ location.hostname +'"]').attr('target','_blank');
Lichtdesign
quelle
0

Ich glaube, diese Abfrage funktioniert gut für Sie. Bitte überprüfen Sie einen Code unten.

Dadurch funktioniert Ihre Übermittlungsaktion und es wird ein Link in einem neuen Tab geöffnet, unabhängig davon, ob Sie die Aktions-URL erneut öffnen möchten oder einen neuen Link

jQuery('form').on('submit',function(e){
setTimeout(function () { window.open('https://www.google.com','_blank');}, 1000);});})

Dieser Code funktioniert bei mir perfekt ..

Abhi
quelle
-4

window.open funktioniert nicht in allen Browsern, Google it und Sie werden einen Weg finden, den richtigen Dialogtyp zu erkennen.

Bewegen Sie den Onclick-Aufruf außerdem auf die Eingabetaste, damit er nur ausgelöst wird, wenn der Benutzer ihn sendet.

cjk
quelle
1
Ein Klick auf die Eingabetaste ist falsch. Wenn der Benutzer darauf klickt, sich jedoch vor dem Loslassen entfernt, wird es weiterhin ausgelöst.
Matthew Flaschen
-11

Ich habe auch dafür eine Lösung gefunden. Diese Seite hat mir heute geholfen, also poste ich auch hier neu.

/** This is the script that will redraw current screen and submit to paypal. */
echo '<script>'."\n" ;
echo 'function serverNotifySelected()'."\n" ;
echo '{'."\n" ;
echo '    window.open(\'\', \'PayPalPayment\');'."\n" ;
echo '    document.forms[\'paypal_form\'].submit();'."\n" ;
echo '    document.forms[\'server_responder\'].submit();'."\n" ;
echo '}'."\n" ;
echo '</script>'."\n" ;

/** This form will be opened in a new window called PayPalPayment. */
echo '<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" name="paypal_form" method="post" target="PayPalPayment">'."\n" ;
echo '<input type="hidden" name="cmd" value="_s-xclick">'."\n" ;
echo '<input type="hidden" name="custom" value="'.$transaction_start.'">'."\n" ;
echo '<input type="hidden" name="hosted_button_id" value="'.$single_product->hosted_button_id.'">'."\n" ;
echo '<table>'."\n" ;
echo '    <tr>'."\n";
echo '        <td><input type="hidden" name="'.$single_product->hide_name_a.'" value="'.$single_product->hide_value_a.'">Local</td>'."\n" ;
echo '    </tr>'."\n" ;
echo '    <tr>'."\n" ;
echo '        <td>'."\n" ;
echo '        <input type="hidden" name="'.$single_product->hide_name_b.'" value="'.$single_product->hide_value_b.'" />'.$single_product->short_desc.' $'.$adj_price.' USD'."\n" ;
                // <select name="os0">
                //     <option value="1 Day">1 Day $1.55 USD</option>
                //     <option value="All Day">All Day $7.50 USD</option>
                //     <option value="3 Day">3 Day $23.00 USD</option>
                //     <option value="31 Day">31 Day $107.00 USD</option>
                // </select>
echo '        </td>'."\n" ;
echo '    </tr>'."\n" ;
echo '</table>'."\n" ;
echo '<input type="hidden" name="currency_code" value="USD">'."\n" ;
echo '</form>'."\n" ;

/** This form will redraw the current page for approval. */
echo '<form action="ProductApprove.php" name="server_responder" method="post" target="_top">'."\n" ;
echo '<input type="hidden" name="trans" value="'.$transaction_start.'">'."\n" ;
echo '<input type="hidden" name="prod_id" value="'.$this->product_id.'">'."\n" ;
echo '</form>'."\n" ;

/** No form here just an input and a button.  onClick will handle all the forms */
echo '<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" alt="PayPal - The safer, easier way to pay online!" onclick="serverNotifySelected()">'."\n" ;
echo '<img alt="" border="0" src="https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">'."\n" ;

Der obige Code ist der Code für eine Schaltfläche. Sie drücken die Taste und der aktuelle Bildschirm wird vom Kauf bis zur Vorabgenehmigung neu gezeichnet. Gleichzeitig wird ein neues Fenster geöffnet und das neue Fenster an PayPal übergeben.

user2737761
quelle
5
Das OP hat gesagt, dass sie neu im Code sind - IMO, das eine ganze Menge (schrecklich formatierten) Codes in Bezug auf Paypal-Schaltflächen veröffentlicht, wird ihnen nicht helfen
Mike