1. ホーム
  2. javascript

2つの送信ボタンと2つの "target "属性を持つHTMLフォーム

2023-10-11 17:52:06

質問

HTMLのフォームを1つ持っています。

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

しかし、私は2つの異なる target="" 属性が欲しいのです。これはおそらく凝った JavaScript コードですが、どこから始めればよいのか見当もつきません。

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

どのように解決するのですか?

フォームには、1つの送信ボタンに結びついたデフォルトのアクションと、プレーンなボタンに結びついた別のアクションがあるという考え方で、この問題に取り組むのがより適切でしょう。ここでの違いは、ユーザーが Enter キーを押してフォームを送信するときに、submit の下にあるものが使用され、ユーザーが明示的にボタンをクリックしたときにのみ、他のものが実行されることです。

とにかく、このことを念頭に置いて、これでうまくいくはずです。

<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では動作しません。