it-swarm.com.de

HTML-Formular mit zwei Senden-Schaltflächen und zwei "Ziel" -Attributen

Hallo, ich habe ein HTML-Formular.

Das Formular hat nur ein action=""-Attribut.

Ich möchte jedoch zwei verschiedene target=""-Attribute haben, abhängig davon, auf welche Schaltfläche Sie klicken, um das Formular zu senden. Dies ist wahrscheinlich etwas schickes Javascript, aber ich habe keine Ahnung, wo ich anfangen soll.

Gibt es eine Idee, wie ich zwei Schaltflächen erstellen könnte, die jeweils dasselbe Formular senden, aber jede Schaltfläche gibt dem Formular ein anderes Ziel?

VIELEN DANK!

71
Stoob

Es ist sinnvoller, dieses Problem mit der Mentalität anzugehen, dass ein Formular eine Standardaktion mit einer Übergabeschaltfläche und eine alternative Aktion mit einer einfachen Schaltfläche verknüpft. Der Unterschied besteht darin, dass derjenige, der unter das Submit geht, derjenige ist, der verwendet wird, wenn ein Benutzer das Formular durch Drücken der Eingabetaste absendet, während der andere nur ausgelöst wird, wenn ein Benutzer explizit auf die Schaltfläche klickt.

Auf jeden Fall sollte dies dies tun:

<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 Übergabeschaltfläche binden, funktionieren im IE nicht.

61

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 Weiterleitung 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, funktioniert aber auch für POST

Dann können Sie leicht feststellen, welche Taste gedrückt wurde. Wenn die Variable retry vorhanden ist und einen Wert hat, wurde erneut versucht, und wenn die Variable abort vorhanden ist und einen Wert hat, wurde Abbruch gedrückt. Dieses Wissen kann dann verwendet werden, um an die entsprechende Stelle umzuleiten.

Diese Methode benötigt kein Javascript.

Hinweis: dass einige Browser in der Lage sind, ein Formular zu senden, ohne eine Schaltfläche zu drücken (durch Drücken der Eingabetaste). Nicht-Standard, wie es ist, Sie müssen dies berücksichtigen, indem Sie eine eindeutige default-Aktion und Aktivieren Sie diese Option, wenn keine Tasten gedrückt wurden. Mit anderen Worten, Stellen Sie sicher, dass Ihr Formular etwas Sinnvolles ausführt (ob dies eine hilfreiche Fehlermeldung anzeigt oder einen Standardwert annimmt), wenn jemand Die Treffer werden in ein anderes Formularelement eingegeben, anstatt auf ein Senden zu klicken Taste, anstatt nur zu brechen.

75
thomasrutter

Falls Sie HTML5 verwenden, können Sie einfach das Attribut formaction verwenden. Dadurch können Sie für jede Schaltfläche ein anderes Formular action verwenden.

<!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>
49
koppor

Das funktioniert für mich:

<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";' />
6
trojan

In diesem Beispiel genommen aus

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

Den Weg zum Ändern des Ziels sehen Sie im OnClick-Ereignis der Schaltfläche.

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');">
4
tekBlues

Beispiel:

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

Voila . Sehr "schick", drei Word-JavaScript!

2
Rolf

Einfach und leicht zu verstehen, wird der Name der Schaltfläche gesendet, auf die geklickt wurde. Dies kann den Bedarf an zwei Zielen reduzieren. 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");
}
?>
2
Mikeys4u

Es ist serverseitig 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 Knotenserver-Skript

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


        }
    }); 
1
Yunus Khan

Hier ist ein schnelles 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>
1
Kai

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/

1
test30
<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>
1
jbowen7

Alternative Lösung. Lassen Sie sich nicht mit onclick, Buttons, Server-Seite und allem vermasseln. 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>

In Javascript können Sie jetzt alle Elemente der Hauptform in v() mithilfe von getElementsByTagName () 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);
}   
0
Kaushal Paneri

Auf jedem Ihrer Knöpfe können Sie Folgendes haben:

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

Dann habe 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 tun.

0
Christian

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>
0
Alika Matthew

Lassen Sie beide Schaltflächen auf der aktuellen Seite anzeigen und fügen Sie diesen Code oben ein:

<?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']}");
?>

Sie können auch $ _SESSION verwenden, wenn die Variablen nicht angezeigt werden sollen.

0
Brendan Long