[英]HTML form with two submit buttons and two "target" attributes
我有一個 HTML <form>。
該表單只有一個action=""
屬性。
但是,我希望有兩個不同的target=""
屬性,具體取決於您單擊哪個按鈕來提交表單。 這可能是一些花哨的 JavaScript 代碼,但我不知道從哪里開始。
如何創建兩個按鈕,每個按鈕都提交相同的表單,但每個按鈕都為表單提供不同的目標?
我在服務器端這樣做。 也就是說,表單總是提交給同一個目標,但是我有一個服務器端腳本,負責根據按下的按鈕重定向到適當的位置。
如果你有多個按鈕,例如
<form action="mypage" method="get">
<input type="submit" name="retry" value="Retry" />
<input type="submit" name="abort" value="Abort" />
</form>
注意:我使用了GET,但它也適用於POST
然后您可以輕松確定按下了哪個按鈕 - 如果變量retry
存在並且具有值,則按下重試,如果變量abort
存在且具有值,則按下abort。 然后可以使用該知識將重定向到適當的位置。
此方法不需要Javascript。
注意:某些瀏覽器無需按任何按鈕即可提交表單(按Enter鍵)。 這是非標准的,您必須通過明確的
default
操作來解釋它,並在沒有按下任何按鈕時激活它。 換句話說,當有人點擊輸入不同的表單元素而不是單擊提交按鈕而不是僅僅打破時,請確保您的表單做了一些合理的事情 (無論是顯示有用的錯誤消息還是假設默認值)。
使用一個表單將默認操作綁定到一個提交按鈕,然后綁定到普通按鈕的替代操作的心態來解決此問題更為合適。 這里的不同之處在於,提交下的任何一個都是當用戶通過按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,您可以使用屬性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>
這對我有用:
<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";' />
在這個例子中,取自
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');">
例:
<input
type="submit"
onclick="this.form.action='new_target.php?do=alternative_submit'"
value="Alternative Save"
/>
瞧。 非常“花哨”,三字JavaScript!
簡單易懂,這將發送已單擊的按鈕的名稱,然后將分支以執行您想要的任何操作。 這可以減少對兩個目標的需求。 少頁......!
<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");
}
?>
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)
})
<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>
它可以在服務器端執行。
<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) {...}
}
});
這是一個快速示例腳本,顯示更改目標類型的表單:
<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>
讓兩個按鈕都提交到當前頁面,然后在頂部添加此代碼:
<?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來完成。
替代解決方案。 不要搞砸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);
}
這可能會幫助某人:
使用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>
e.submitEvent.originalEvent.submitter.value
如果您使用表單事件
在每個按鈕上,您可以擁有以下內容;
<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>
這應該夠了吧。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.