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

Question 1

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?

Question 2

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.

Question 3

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.

Question 4

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>

Question 5

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

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

Question 7

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

Question 8

Beispiel:

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

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

Question 9

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>

Question 10

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/

Question 11

<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>

Question 12

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) {...}    


        }
    });

Question 13

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.

Question 14

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.

Question 15

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);
}

Question 16

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>