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

我有一个 HTML

表单只有一个action="" 属性。

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

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

【问题讨论】:

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

标签: javascript html forms submit


【解决方案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开始,可以使用&lt;input type="submit" formaction="action2.php" value="Other Action"&gt;&lt;/input&gt;
【解决方案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>
                      

                      这应该可以解决问题。

                      【讨论】:

                        猜你喜欢
                        • 2012-08-09
                        • 1970-01-01
                        • 1970-01-01
                        • 2020-11-20
                        • 2016-01-18
                        • 2013-03-20
                        • 2020-03-20
                        • 2014-05-10
                        • 1970-01-01
                        相关资源
                        最近更新 更多