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

Sto*_*oob 73 html javascript forms submit

嗨,我有一个HTML <form>.

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

但是,我希望有2个不同的target=""属性,具体取决于您单击哪个按钮来提交表单.这可能是一些奇特的javascript,但我不知道从哪里开始.

任何想法我如何创建两个按钮,每个按钮提交相同的表单,但每个按钮给表单一个不同的目标?

谢谢!

tho*_*ter 77

我在服务器端这样做.也就是说,表单总是提交给同一个目标,但是我有一个服务器端脚本,负责根据按下的按钮重定向到适当的位置.

如果你有多个按钮,例如

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

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

</form>
Run Code Online (Sandbox Code Playgroud)

注意:我使用了GET,但它也适用于POST

然后,您可以轻松确定按下了哪个按钮 - 如果变量retry存在且具有值,则按下重试,如果变量abort存在且具有值,则按下abort.然后可以使用该知识将重定向到适当的位置.

此方法不需要Javascript.

注意:某些浏览器无需按任何按钮即可提交表单(按Enter键).这是非标准的,您必须通过明确的default操作来解释它,并在没有按下任何按钮时激活它.换句话说,当有人点击输入不同的表单元素而不是单击提交按钮而不是仅仅打破时,请确保您的表单做了一些合理的事情(无论是显示有用的错误消息还是假设默认值).


Pao*_*ino 62

使用一个表单将默认操作绑定到一个提交按钮,然后绑定到普通按钮的替代操作的心态来解决此问题更为合适.这里的不同之处在于,提交下的任何一个都是当用户通过按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>
Run Code Online (Sandbox Code Playgroud)

有了这个javascript:

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

document.getElementById('btn2').onclick = function() {
    form.target = '_blank';
    form.submit();
}
Run Code Online (Sandbox Code Playgroud)

将代码绑定到提交按钮的单击事件的方法将无法在IE上运行.

  • 从HTML5开始,可以使用`<input type ="submit"formaction ="action2.php"value ="Other Action"> </ input>` (3认同)

kop*_*por 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>
Run Code Online (Sandbox Code Playgroud)

  • 虽然大多数人都不会注意到这一点,但这很有用 (8认同)

tro*_*jan 7

这对我有用:

<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";' />
Run Code Online (Sandbox Code Playgroud)


tek*_*ues 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');">
Run Code Online (Sandbox Code Playgroud)