HTML-Formular mit zwei Senden-Schaltflächen und zwei Zielattributen

75

Ich habe ein HTML <Formular>.

Das Formular hat nur ein action=""Attribut.

Ich möchte jedoch zwei verschiedene target=""Attribute haben, je nachdem, auf welche Schaltfläche Sie klicken, um das Formular zu senden. Dies ist wahrscheinlich ein ausgefallener JavaScript-Code, aber ich habe keine Ahnung, wo ich anfangen soll.

Wie kann ich zwei Schaltflächen erstellen, die jeweils dasselbe Formular senden, aber jeder Schaltfläche gibt dem Formular ein anderes Ziel?

javascript html forms submit Stoob
quelle
4
Hier gibt es ein Usability-Problem: Was passiert, wenn ich die Eingabetaste drücke, anstatt auf eine Schaltfläche zu klicken? Sie müssen höchstwahrscheinlich das Übermittlungsereignis des Formulars abbrechen.
Ryan Florence
Das Formular sollte eine Schaltfläche haben, die die Standardeinstellung ist, wenn das Formular gesendet wird, aber keine der Schaltflächen aktiviert wurde. Die Standardeinstellung sollte mit Bedacht gewählt werden. Beachten Sie, dass die Funktion "Treffer eingeben" nur eine browserspezifische Erweiterung ist und nicht als verlässlich angesehen werden sollte, während alle Browser eine bestimmte Schaltfläche aktivieren können.
Thomasrutter
Mögliches Duplikat von zwei Submit-Buttons in einer Form
Peter Mortensen

Antworten:

63

Es ist angemessener, dieses Problem mit der Mentalität anzugehen, dass ein Formular eine Standardaktion hat, die an eine Senden-Schaltfläche gebunden ist, und dann eine alternative Aktion, die an eine einfache Schaltfläche gebunden ist. Der Unterschied besteht darin, dass derjenige, der unter die Übermittlung geht, derjenige ist, der verwendet wird, wenn ein Benutzer das Formular durch Drücken der Eingabetaste sendet, während der andere nur ausgelöst wird, wenn ein Benutzer explizit auf die Schaltfläche klickt.

In diesem Sinne sollte dies jedenfalls geschehen:

<form id='myform' action='jquery.php' method='GET'>
    <input type='submit' id='btn1' value='Normal Submit'>
    <input type='button' id='btn2' value='New Window'>
</form>

Mit diesem Javascript:

var form = document.getElementById('myform');
form.onsubmit = function() {
    form.target = '_self';
};

document.getElementById('btn2').onclick = function() {
    form.target = '_blank';
    form.submit();
}

Ansätze, die Code an das Klickereignis der Senden-Schaltfläche binden, funktionieren im IE nicht.

Paolo Bergantino
quelle
Mit einigen Anpassungen war dies am besten für meine Bedürfnisse geeignet. danke
Stoob
3
Seit HTML5 ist es möglich,<input type="submit" formaction="action2.php" value="Other Action"></input>
Ákos Vandra
77

Ich mache das auf der Serverseite. Das heißt, das Formular wird immer an dasselbe Ziel gesendet, aber ich habe ein serverseitiges Skript, das für die Umleitung an den entsprechenden Speicherort verantwortlich ist, je nachdem, welche Taste gedrückt wurde.

Wenn Sie mehrere Schaltflächen haben, z 

<form action="mypage" method="get">

  <input type="submit" name="retry" value="Retry" />
  <input type="submit" name="abort" value="Abort" />

</form>

Hinweis: Ich habe GET verwendet, aber es funktioniert auch für POST

Dann können Sie leicht feststellen, welche Taste gedrückt wurde - wenn die Variable retryexistiert und einen Wert hat, wurde ein erneuter Versuch gedrückt, und wenn die Variable abortexistiert und einen Wert hat, wurde der Abbruch gedrückt. Dieses Wissen kann dann verwendet werden, um an den entsprechenden Ort umzuleiten.

Diese Methode benötigt kein Javascript.

Hinweis: Einige Browser können ein Formular senden, ohne eine Taste zu drücken (durch Drücken der Eingabetaste). Da dies nicht dem Standard entspricht, müssen Sie dies berücksichtigen, indem Sie eine eindeutige defaultAktion ausführen und diese aktivieren, wenn keine Tasten gedrückt wurden. Mit anderen Worten, stellen Sie sicher, dass Ihr Formular etwas Sinnvolles tut (unabhängig davon, ob eine hilfreiche Fehlermeldung angezeigt wird oder eine Standardeinstellung angenommen wird), wenn jemand die Eingabetaste in einem anderen Formularelement drückt, anstatt auf eine Senden-Schaltfläche zu klicken, anstatt nur zu brechen.

thomasrutter
quelle
Ich bin nicht sicher, ob es daran liegt, dass seit dieser Antwort 7 Jahre vergangen sind, aber diese Methode funktioniert bei mir nicht (Testen in Chrome)
Andrew
Dies sollte so funktionieren wie vor 7 Jahren. Sie sollten sich einfach keine Sorgen mehr um die Notiz unten machen müssen.
Thomasrutter
1
Wie funktioniert redirecting to the appropriate location work for POST too? Angenommen, dieser Ort ist eine URL, würde ich denken, dass alle Daten weg sind ... Ich muss etwas übersehen oder jemand hätte das in den letzten 7 Jahren erwähnt ... Bedeutet das @Andrew?
Mark
Die Weiterleitung nach einem Beitrag würde keine zusätzlichen Formulardaten an die Ziel-URL weiterleiten. In dem trivialen Beispiel, das ich gegeben habe, ist das kein Problem, da es keine anderen Formularelemente gibt. Wenn Sie über andere Formulardaten verfügen, müssen Sie diese auf andere Weise an das Ziel weitergeben, z. B. indem Sie sie in eine Abfragezeichenfolge übersetzen oder außerhalb des Bandes übergeben. Das typische Szenario für diese Art von Dingen bestand für mich darin, eine "Senden" -Aktion und eine "Abbrechen" -Aktion (oder eine "Hierher gehen statt" -Aktion ") und nur die letztere Aktion umzuleiten. Dies ist eine andere Möglichkeit es ohne sich um POST-Daten zu
kümmern
Aktion = Ort. Aktion ≠ Ziel. Siehe w3schools.com/tags/att_a_target.asp .
Zylstra
50

Wenn Sie mit HTML5 arbeiten, können Sie einfach das Attribut verwenden formaction. Auf diese Weise können Sie actionfür jede Schaltfläche ein anderes Formular festlegen.

<!DOCTYPE html>
<html>
  <body>
    <form>
      <input type="submit" formaction="firsttarget.php" value="Submit to first" />
      <input type="submit" formaction="secondtarget.php" value="Submit to second" />
    </form>
  </body>
</html>
koppor
quelle
Gut. Sie können das Klickereignis über jQuery abfangen und das Attribut für die Formularaktion ändern, um es mit älteren Browsern kompatibel zu machen.
GDY
1
formaction ≠ Ziel. formaction ist der Speicherort (dh die URL), an den das Formular gesendet wird. Ziel ist der Name der Registerkarte / des Fensters des Browsers, auf dem die Formularergebnisse angezeigt werden.
Zylstra
Heiß! Heiß! Heiß! Habe ich dies jedoch verpasst, als ich für HTML5 überarbeitet habe?
Parapluie
8

Das funktioniert bei mir:

<input type='submit' name='self' value='This window' onclick='this.form.target="_self";' />

<input type='submit' name='blank' value='New window' onclick='this.form.target="_blank";' />
Trojaner
quelle
6

In diesem Beispiel aus

http://www.webdeveloper.com/forum/showthread.php?t=75170

Sie können die Möglichkeit zum Ändern des Ziels auf der Schaltfläche OnClick-Ereignis sehen.

function subm(f,newtarget)
{
document.myform.target = newtarget ;
f.submit();
}

<FORM name="myform" method="post" action="" target="" >

<INPUT type="button" name="Submit" value="Submit" onclick="subm(this.form,'_self');">
<INPUT type="button" name="Submit" value="Submit" onclick="subm(this.form,'_blank');">
tekBlues
quelle
3

Einfach und leicht zu verstehen, sendet dies den Namen der Schaltfläche, auf die geklickt wurde, und verzweigt sich dann, um zu tun, was Sie wollen. Dies kann den Bedarf an zwei Zielen verringern. Weniger Seiten ...!

<form action="twosubmits.php" medthod ="post">
<input type = "text" name="text1">

<input type="submit"  name="scheduled" value="Schedule Emails">
<input type="submit"  name="single" value="Email Now">
</form>

twosubmits.php

<?php
if (empty($_POST['scheduled'])) {
// do whatever or collect values needed
die("You pressed single");
}

if (empty($_POST['single'])) {
// do whatever or collect values needed
die("you pressed scheduled");
}
?>
Mikeys4u
quelle
2

Beispiel:

<input 
  type="submit" 
  onclick="this.form.action='new_target.php?do=alternative_submit'" 
  value="Alternative Save"
/>

Voila. Sehr "schick", drei Wörter JavaScript!

Rolf
quelle
1

Hier ist ein kurzes Beispielskript, das ein Formular anzeigt, das den Zieltyp ändert:

<script type="text/javascript">
    function myTarget(form) {
        for (i = 0; i < form.target_type.length; i++) {
            if (form.target_type[i].checked)
                val = form.target_type[i].value;
        }
        form.target = val;
        return true;
    }
</script>
<form action="" onSubmit="return myTarget(this);">
    <input type="radio" name="target_type" value="_self" checked /> Self <br/>
    <input type="radio" name="target_type" value="_blank" /> Blank <br/>
    <input type="submit">
</form>
Kai
quelle
1

HTML: 

<form method="get">
<input type="text" name="id" value="123"/>
<input type="submit" name="action" value="add"/>
<input type="submit" name="action" value="delete"/>
</form>

JS: 

$('form').submit(function(ev){ 
ev.preventDefault();
console.log('clicked',ev.originalEvent,ev.originalEvent.explicitOriginalTarget) 
})

http://jsfiddle.net/arzo/unhc3/

test30
quelle
explicitOriginalTargetist eine Mozilla-spezifische Erweiterung
cjg
1 
<form id='myForm'>
    <input type="button" name="first_btn" id="first_btn">
    <input type="button" name="second_btn" id="second_btn">
</form>

<script>

$('#first_btn').click(function(){
    var form = document.getElementById("myForm")
    form.action = "https://foo.com";
    form.submit();
});

$('#second_btn').click(function(){
    var form = document.getElementById("myForm")
    form.action = "http://bar.com";
    form.submit();
});

</script>
jbowen7
quelle
1

Es ist auf der Serverseite machbar.

<button type="submit" name="signin" value="email_signin" action="/signin">Sign In</button>
<button type="submit" name="signin" value="facebook_signin"  action="/facebook_login">Facebook</button>

und in meinem knotenserverseitigen Skript

app.post('/', function(req, res) {
if(req.body.signin == "email_signin"){
            function(email_login) {...} 
        }
if(req.body.signin == "fb_signin"){
            function(fb_login) {...}    


        }
    });
Yunus Khan
quelle
0

Auf jeder Ihrer Schaltflächen können Sie Folgendes haben:

<input type="button" name="newWin" onclick="frmSubmitSameWin();">
<input type="button" name="SameWin" onclick="frmSubmitNewWin();">

Dann haben Sie ein paar kleine js-Funktionen;

<script type="text/javascript">
function frmSubmitSameWin() {
form.target = '';
form.submit();
}


function frmSubmitNewWin() {
form.target = '_blank';
form.submit();
}
</script>

Das sollte den Trick machen.

Christian
quelle
0

Lassen Sie beide Schaltflächen an die aktuelle Seite senden und fügen Sie diesen Code oben hinzu:

<?php
    if(isset($_GET['firstButtonName'])
        header("Location: first-target.php?var1={$_GET['var1']}&var2={$_GET['var2']}");
    if(isset($_GET['secondButtonName'])
        header("Location: second-target.php?var1={$_GET['var1']}&var2={$_GET['var2']}");
?>

Dies kann auch mit $ _SESSION erfolgen, wenn die Variablen nicht angezeigt werden sollen.

Brendan Long
quelle
0

Alternative Lösung. Lassen Sie sich nicht mit Onclick, Schaltflächen, Serverseite und allem durcheinander bringen. Erstellen Sie einfach ein neues Formular mit einer anderen Aktion wie dieser.

<form method=post name=main onsubmit="return validate()" action="scale_test.html">
<input type=checkbox value="AC Hi-Side Pressure">AC Hi-Side Pressure<br>
<input type=checkbox value="Engine_Speed">Engine Speed<br>
<input type=submit value="Linear Scale" />
</form>
<form method=post name=main1 onsubmit="return v()" action=scale_log.html>
<input type=submit name=log id=log value="Log Scale">
</form>

Jetzt können Sie in Javascript mit Hilfe von getElementsByTagName () alle Elemente der Hauptform in v () abrufen . Um zu wissen, ob das Kontrollkästchen aktiviert ist oder nicht

function v(){
var check = document.getElementsByTagName("input");

    for (var i=0; i < check.length; i++) {
        if (check[i].type == 'checkbox') {
            if (check[i].checked == true) {

        x[i]=check[i].value
            }
        }
    }
console.log(x);
}
Kaushal Paneri
quelle
0

Dies könnte jemandem helfen:

Verwenden Sie das Attribut formtarget 

<html>
  <body>
    <form>
      <!--submit on a new window-->
      <input type="submit" formatarget="_blank" value="Submit to first" />
      <!--submit on the same window-->
      <input type="submit" formaction="_self" value="Submit to second" />
    </form>
  </body>
</html>
Alika Matthew
quelle