javascript - validate - js form提交




带有两个提交按钮和两个“目标”属性的HTML表单 (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/

您好我有一个HTML <form>。

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

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

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

谢谢!


这可能有助于某人:

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

例:

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

瞧。 非常“奇特”,三个字的JavaScript!


在每个按钮上,您都可以拥有以下内容;

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

这应该够了吧。


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

它在服务器端是可行的。

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


        }
    }); 

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

如果您有多个按钮,例如

<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行动来解决它,并在没有按钮被按下时激活它。 换句话说,确保你的表单做了一些合理的事情 (无论是显示有用的错误消息还是假设默认情况下),当有人点击进入不同的表单元素而不是点击提交按钮时,而不仅仅是打破。


替代解决方案。 不要让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);
}   

简单易懂,这将发送已点击的按钮的名称,然后将分支做任何你想要的。 这可以减少对两个目标的需求。 更少的页面...!

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

这适用于我:

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




submit