2つの送信ボタンと2つの「ターゲット」属性を持つHTMLフォーム

こんにちは私は<のフォーム>を持っています。2つの送信ボタンと2つの「ターゲット」属性を持つHTMLフォーム

このフォームには、action=""属性が1つしかありません。

しかし、フォームを送信するためにクリックするボタンに応じて、2つの異なるtarget=""属性を使用したいと考えています。これはおそらくいくつかの素晴らしいjavascriptですが、私はどこから始めるべきか分かりません。

どのように私は2つのボタンを作成することができるすべてのアイデアは、それぞれ同じフォームを提出するが、各ボタンは、異なるターゲットを与えるフォーム？

感謝！この例では

2009-06-03 Stoob

formtarget属性を使用してください：どのような私がclickinの代わりに 'enter'を押すと起こるボタン？あなたはフォームの提出イベントをキャンセルする必要があります。 –

フォームには1つのボタンが必要です。フォームが送信されてもボタンがアクティブ化されていない場合は「デフォルト」です。デフォルトは賢明に選択する必要があります。「ヒット・エンター」はブラウザ固有の拡張機能であり、信頼されるべきではありませんが、すべてのブラウザは特定のボタンをアクティブにすることができます。 – thomasrutter

良い点ありがとう – Stoob

フォームが一つに結ばれ、デフォルトのアクションは、送信ボタンを持っていることを考え方で、この問題にアプローチすることがより適切です、次にプレーンボタンにバインドされた代替アクション。ここでの違いは、ユーザーが入力を押してフォームを送信したときに使用されたものと、ユーザーが明示的にボタンをクリックしたときにのみ起動するものであることです。

とにかく、このことを念頭に置いて、これはそれを行う必要があります。

このJavaScriptを使用して

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

：送信ボタンのクリックイベントにコードをバインド

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

document.getElementById('btn2').onclick = function() { 
    form.target = '_blank'; 
    form.submit(); 
}

アプローチは、IE上では動作しません。

出典

2009-06-03 02:37:26

これは私のニーズに最も適していました。ありがとう – Stoob

HTML5以降、 '' –

は、あなたがボタンのOnClickイベントにターゲットを変更する方法を見ることができます

http://www.webdeveloper.com/forum/showthread.php?t=75170

から取られました。

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

出典

2009-06-03 02:22:15 tekBlues

各ボタンには次のものがあります。

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

これはすべきことです。

出典

2009-06-03 02:27:24 Christian

が、ここでターゲット・タイプを変更するフォームを表示する簡単な例のスクリプトです：

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

出典

2009-06-03 02:34:12 Kai

私はこれをサーバー側で行います。つまり、フォームは常に同じターゲットに送信されますが、押されたボタンに応じて適切な場所にリダイレクトするサーバーサイドスクリプトがあります。あなたは複数のボタンがある場合は

、など

<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を必要としません。

注：一部のブラウザは、（Enterキーを押して）、任意のボタンを押さずにフォームを送信することが可能である。これは非標準です。ボタンを押さなくても、defaultのアクションをクリアし、をアクティブにする必要があります。誰かヒットが異なるフォーム要素に入力する代わりに提出ボタンだけではなく、破壊をクリックすると、他の言葉では、は（それが有用なエラーメッセージを表示するか、デフォルトを想定しのかどうか）あなたのフォームが賢明何かをすることを確認してください。

出典

2009-06-03 03:03:27 thomasrutter

これは受け入れられた回答でなければなりません – Oliver

この回答から7年が経過していますが、この方法は私にとっては機能しません（Chromeでのテスト） – Andrew

これは7年前と同じように動作します。あなたは、もはや底面のメモを心配する必要はありません。 – thomasrutter

両方のボタンが現在のページに提出した後、上部にこのコードを追加しまし：あなたは彼らが変数を表示したくない場合にも$ _SESSIONを使用して行うことができ

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

。

<!DOCTYPE html> 
<html> 
    <body> 
    <form> 
     <input type="submit" formaction="firsttarget" value="Submit to first" /> 
     <input type="submit" formaction="secondtarget" value="Submit to second" /> 
    </form> 
    </body> 
</html>

出典

2009-11-24 17:46:29

はケースでは、HTML5まで、あなただけの属性formactionを使用することができます。非常に "派手な"、3単語のJavaScript！

出典

2012-03-27 17:18:06 koppor

ほとんど気づかれないかもしれないが、これはよく分かった。 –

良いこと。jQueryでclickイベントを捕まえ、フォームアクション属性を –

formaction≠target。* formaction *は、フォームが送信される場所（つまりURL）です。* target *は、ブラウザのタブ/ウィンドウの名前です。フォームの結果が表示されます。 – zylstra

例：

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

出来上がり

出典

2013-06-12 07:21:31 Rolf

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/

出典

2013-08-21 13:28:47 test30

'explicitOriginalTarget'はmozilla固有の拡張です – cjg

これは私の作品：

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

出典

2013-10-01 14:02:35 trojan

はい、人生はとても簡単です... – robsch

シンプルで理解しやすい、これは名前を送信しますボタンのt帽子がクリックされたら、あなたが望むことをするために分岐します。これにより、2つのターゲットの必要性を減らすことができます。少ないページ...！

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

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

出典

2013-11-04 15:42:42 Mikeys4u

代替ソリューション。 onclick、ボタン、サーバー側、all.Justとちょうどこのような別のアクションを持つ新しいフォームを作成しています。あなたがgetElementsByTagName()の助けを借りて）（V INメインフォームのすべての要素を取得することができますJavaScriptで今

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

。

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

出典

2014-02-11 04:35:49

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

出典

2015-05-15 02:18:13 jbowen7

をチェックボックスがチェックされているかどうか知っているか、いないためにそれはやる可能なサーバ側です。

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


     } 
    });

出典

2016-04-28 11:06:41

私のノードのサーバーサイドスクリプトではこれが誰かを助けるかもしれない：

は、ユーザビリティの問題がここにあります

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

出典

2018-02-11 18:59:01

2つの送信ボタンと2つの「ターゲット」属性を持つHTMLフォーム

答えて

関連する問題