具有两个提交按钮和两个“目标”属性的HTML表单

75

我有一个HTML <form>。

该表格只有一个action=""属性。

但是，我希望具有两个不同的target=""属性，具体取决于您单击哪个按钮提交表单。这可能是一些花哨的JavaScript代码，但是我不知道从哪里开始。

如何创建两个按钮，每个按钮提交相同的表单，但是每个按钮为表单提供不同的目标？

javascript  html  forms  submit 
— 斯托布
source
4
这里有一个可用性问题：当我单击“ enter”而不是单击按钮时会发生什么？您很有可能必须取消表单的Submit事件。
— 瑞安·弗洛伦斯
如果提交了表单，但没有激活任何按钮，则该表单应具有一个“默认”按钮。默认值应明智选择。请注意，“按回车”只是一个特定于浏览器的扩展，不应被依赖，而所有浏览器都可以激活特定按钮。
— thomasrutter
— Peter Mortensen

Answers:

63

更合适的解决方法是，表单将一个默认操作绑定到一个提交按钮，然后将另一操作绑定到一个普通按钮。此处的区别在于，提交下的任何一个都将是用户通过按Enter提交表单时使用的那个，而另一个只有在用户明确单击按钮时才会被触发。

无论如何，考虑到这一点，应该这样做：

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

使用此javascript：

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

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

将代码绑定到提交按钮的click事件的方法不适用于IE。

— 保罗·贝尔甘蒂诺
source
经过一些微调，这最适合我的需求。谢谢
— Stoob
3
由于HTML5，可以使用<input type="submit" formaction="action2.php" value="Other Action"></input>
— AKOS Vandra
77

我在服务器端执行此操作。也就是说，表单始终提交给同一目标，但是我有一个服务器端脚本，该脚本负责根据按下的按钮重定向到适当的位置。

如果您有多个按钮，例如 

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

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

</form>

注意：我使用GET，但它也适用于POST

然后，您可以轻松确定按下了哪个按钮-如果变量retry存在并且具有值，则按下重试，如果变量abort存在并且具有值，则按下中止。然后，可以将这些知识用于重定向到适当的位置。

此方法不需要Javascript。

注意：某些浏览器能够提交表单而无需按任何按钮（按Enter）。由于这是非标准的，因此您必须通过default采取明确的措施并在未按任何按钮时激活它来解决这一问题。换句话说，请确保您的表单在有人点击时执行明智的操作（无论是显示有用的错误消息还是采用默认值），请输入其他表单元素，而不是单击“提交”按钮，而不只是破坏表单。

— 胸腺
source
我不确定是否是因为此答案已过去7年，但此方法对我不起作用（在Chrome中测试）
— Andrew
这应该像7年前那样工作。您只是不再需要担心底部的注释。
— thomasrutter
1
怎么了redirecting to the appropriate location work for POST too？假设该位置是一个url，我认为所有数据都消失了……我必须忽略某些东西，否则有人会在过去7年中提到它……@Andrew是什么意思？
— 2016年
发布后的重定向不会将任何其他表单数据传递到目标URL。在平凡的示例中，我给出的问题不大，因为没有其他表单元素。如果您有其他表单数据，则需要以其他某种方式将其传递到目标，例如，将其转换为查询字符串或带外传递。对我而言，这类事情的典型场景是有一个“提交”动作和一个“取消”动作（或“去这里代替”动作”），而只有后一个动作被重定向。它无需担心POST数据。
— thomasrutter
动作=位置。行动≠目标。参见w3schools.com/tags/att_a_target.asp。
— zylstra
50

如果您使用的是HTML5，则可以仅使用属性formaction。这使您可以action为每个按钮使用不同的形式。

<!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
source
好一个 您可以通过jQuery捕获click事件，并更改form动作属性以使其与旧版浏览器兼容。
— GDY
1
行动≠目标。 formaction是表单提交到的位置（即URL）。 target是显示表单结果的浏览器选项卡/窗口的名称。
— zylstra
热！热！热！但是，当我为html5进行修订时，我是否错过了？
— Parapluie
8

这对我有用：

<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";' />
— 木马
source
6

在这个例子中，取自

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

您可以在按钮OnClick事件上看到更改目标的方法。

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

简单易懂，这将发送已单击的按钮的名称，然后分支到您要执行的任何操作。这样可以减少对两个目标的需求。更少的页面...！

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

例：

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

瞧 非常“花哨”，三个词的JavaScript！

— 罗尔夫
source
1

这是一个快速的示例脚本，它显示更改目标类型的表单：

<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>
— 凯
source
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/

— 测试30
source
explicitOriginalTarget是mozilla专用的扩展程序
— cjg 2015年
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
source
1

它可以在服务器端执行。

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

在我的节点服务器端脚本中

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


        }
    });
— 尤努斯·汗
source
0

在每个按钮上，您可以拥有以下内容：

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

然后有一些小的js函数；

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


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

这应该够了吧。

— 基督教
source
0

让两个按钮都提交到当前页面，然后在顶部添加以下代码：

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

如果您不希望他们看到变量，也可以使用$ _SESSION来完成。

— 布伦丹·朗（Brendan Long）
source
0

替代解决方案。不要被onclick，按钮，服务器端和所有东西弄得一团糟。只需创建一个具有不同操作的新表单即可。

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

现在，在Javascript中，您可以借助getElementsByTagName（）在v（）中获取主要表单的所有元素。知道复选框是否被选中

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

这可能会帮助某人：

使用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）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.