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

Question

HTMLの<フォーム>が1つあります。

フォームにはaction=""属性が1つだけあります。

ただしtarget=""、フォームを送信するためにクリックするボタンに応じて、2つの異なる属性が必要です。これはおそらくいくつかの凝ったJavaScriptコードですが、どこから始めればよいのかわかりません。

それぞれが同じフォームを送信する2つのボタンを作成するにはどうすればよいですか？ただし、各ボタンはフォームに異なるターゲットを与えますか？

score 76 · Accepted Answer

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

次のような複数のボタンがある場合

<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アクションを実行し、ボタンが押されていないときはいつでもそれをアクティブにすることによって、それを説明する必要があります。つまり、送信ボタンをクリックするのではなく、誰かがEnterキーを押したときに、フォームが適切な処理を実行するようにします（有用なエラーメッセージを表示する場合でも、デフォルトを想定する場合でも）。

score 63 · Accepted Answer

フォームにはデフォルトのアクションが1つの送信ボタンに関連付けられ、次に代替アクションがプレーンボタンにバインドされるという考え方で、この問題に取り組む方が適切です。ここでの違いは、送信の下にある方が、ユーザーが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では機能しません。

score 52 · Accepted Answer

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>

score 8 · Accepted Answer

これは私のために働きます：

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

score 6 · Accepted Answer

この例では、

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

score 3 · Accepted Answer

シンプルで理解しやすい、これはクリックされたボタンの名前を送信し、次にあなたが望むことをするために分岐します。これにより、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.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");
}
?>

score 2 · Accepted Answer

例：

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

出来上がり。非常に「ファンシー」な3ワードのJavaScript！

score 1 · Accepted Answer

ターゲットタイプを変更するフォームを表示する簡単なサンプルスクリプトを次に示します。

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

score 1 · Accepted Answer

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/

score 1 · Accepted Answer

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

score 1 · Accepted Answer

サーバー側で実行可能です。

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


        }
    });

score 0 · Accepted Answer

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

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

それでうまくいくはずです。

score 0 · Accepted Answer

両方のボタンを現在のページに送信してから、このコードを上部に追加します。

<?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を使用して実行することもできます。

score 0 · Accepted Answer

代替ソリューション。onclick、buttons、server sideなどに混乱しないでください。このように、さまざまなアクションで新しいフォームを作成するだけです。

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

score 0 · Accepted Answer

これは誰かを助けるかもしれません：

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>

score 0 · Accepted Answer

0

e.submitEvent.originalEvent.submitter.value

フォームのイベントを使用する場合

于 2022-02-25T07:56:39.150 に答える

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

16 に答える 16

Related

Reference