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

Posted 2023-02-22

技术标签:

【中文标题】带有两个提交按钮和两个“目标”属性的 HTML 表单【英文标题】：HTML form with two submit buttons and two "target" attributes 【发布时间】：2010-10-30 21:02:25 【问题描述】：

我有一个 html

【问题讨论】：

这里有一个可用性问题：当我点击“输入”而不是点击按钮时会发生什么？您很可能不得不取消表单的提交事件。如果提交了表单但没有激活任何按钮，则表单应该有一个“默认”按钮。应该明智地选择默认值。请注意，“点击输入”只是特定于浏览器的扩展，不应依赖，而所有浏览器都能够激活特定按钮。 Two submit buttons in one form 的可能重复项 【参考方案1】：

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

如果你有多个按钮，比如

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

注意：有些浏览器可以在不按任何按钮（按回车键）的情况下提交表单。像这样的非标准，您必须通过明确的default 操作来解决此问题，并且每当没有按下按钮时激活它。换一种说法，确保您的表单做一些有意义的事情（无论是显示有用的错误消息或假设默认值）当有人点击进入不同的表单元素，而不是点击提交按钮，而不仅仅是破坏。

【讨论】：

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

更合适的方法是考虑表单将默认操作绑定到一个提交按钮，然后将替代操作绑定到普通按钮的心态来解决这个问题。此处的区别在于，无论提交下的哪一个都将是用户通过按 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();

将代码绑定到提交按钮的点击事件的方法在 IE 上不起作用。

【讨论】：

经过一些调整，这是最适合我需要的。谢谢从HTML5开始，可以使用<input type="submit" formaction="action2.php" value="Other Action"></input>【参考方案3】：

如果您使用 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>

【讨论】：

好一个。您可以通过 jQuery 捕获 click 事件并更改 forms 操作属性以使其与旧浏览器兼容。形式≠目标。 formaction 是表单提交到的位置（即 URL）。 target 是显示表单结果的浏览器选项卡/窗口的名称。热！热的！热的！但是当我为 html5 修改时，我错过了这个吗？【参考方案4】：

这对我有用：

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

【讨论】：

【参考方案5】：

在这个例子中，取自

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

【讨论】：

【参考方案6】：

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

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

两个提交.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");

?>

【讨论】：

【参考方案7】：

例子：

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

瞧。很“花哨”，三个字的 JavaScript！

【讨论】：

【参考方案8】：

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

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

【讨论】：

【参考方案9】：

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/

【讨论】：

explicitOriginalTarget 是 Mozilla 特定的扩展【参考方案10】：

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

【讨论】：

【参考方案11】：

在服务器端是可行的。

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


        
    );

【讨论】：

【参考方案12】：

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

<?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 来完成。

【讨论】：

【参考方案13】：

替代解决方案。不要搞砸点击、按钮、服务器端等等。只需创建一个具有不同操作的新表单即可。

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

【讨论】：

【参考方案14】：

这可能对某人有所帮助：

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

【讨论】：

【参考方案15】：

在您的每个按钮上，您可以有以下内容；

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

这应该可以解决问题。

【讨论】：

以上是关于带有两个提交按钮和两个“目标”属性的 HTML 表单的主要内容，如果未能解决你的问题，请参考以下文章

带有两个提交按钮的 Symfony 2 表单

带有两个按钮的表单以不同的值提交

用事件处理两个提交按钮

用两个提交按钮区分 HTML 表单上的提交按钮 [重复]

AngularJs在两个按钮之间切换

HTML表单完成两个动作？验证然后通过一个提交按钮重定向