5

javascriptでどの送信ボタンがクリックされたかを知るにはどうすればよいですか?

function submitForm(){
   //if find open popup
   //else if add continue in the same window

}

<form action="/findNames" onsubmit="return submitForm()">
    <input type="submit" value="Add" onclick="submitForm(this)"/>
    <input type="submit" value="Find" onclick="submitForm(this)"/>
</form>

私が試したこと：

次のように代わりにonclickでやろうとしましたが、「検索」ボタンをクリックするとポップアップウィンドウが開き、親ウィンドウも送信されます。親ウィンドウの送信を停止するにはどうすればよいですか?

function submitForm(submit){
    if(submit.value=="Find"){
        find();//opens a popup window
    }else if(submit.value == "Add"){
        //stay in the same window
    } 
}

function find(){
    var width  = 1010;
    var height = 400;           
    var params = 'width='+width+', height='+height;     
    popupWin = window.open('find.do','windowname5', params);
    popupWin.focus();
}

<form action="/findNames">
    <input type="submit" value="Add" onclick="submitForm(this)"/>
    <input type="submit" value="Find" onclick="submitForm(this)"/>
</form>
4

4 に答える 4

7

inputoftype="submit"は常にフォームを送信します。送信しないボタンを作成するには、代わりにinputofを使用します。type="button"

于 2013-04-12T15:58:16.097 に答える
4

あなたは正しい道を進んでいますが、イベントをキャンセルしていないため (または、DOM レベル 2+ の用語では、「イベントのデフォルト アクションを妨げていない」ため)、フォームは常に送信されます。

function submitForm (button)
{
  if (button.value == "Find")
  {
    /* open popup */
    find();
  }
  else if (button.value == "Add")
  {
    /* stay in the same window */
  } 

  return false;
}

<form action="/findNames">
  <input type="submit" value="Add" onclick="return submitForm(this)"/>
  <input type="submit" value="Find" onclick="return submitForm(this)"/>
</form>

submit(注意しないとformオブジェクトのsubmitメソッドをオーバーライドするため、フォーム関連の変数に名前を付けないでください。)

戻り値falseがイベント ハンドラーに返されると、イベントの既定のアクションが妨げられますclick。これは、ユーザー エージェントが最初から送信ボタンがアクティブ化されていないかのように動作し、フォームが送信されないことを意味します。

これを解決するもう 1 つの方法は、クリックされた送信ボタンを識別する値を変数またはプロパティに保存し、その値をsubmitイベント リスナーで確認することです。これclickは、input(送信ボタン) のイベントが定義上、次のsubmitイベントの前に発生するために機能しformます。

var submitName;

function submitForm (form)
{
  if (submitName == "Find")
  {
    /* open popup */
    find();
  }
  else if (submitName == "Add")
  {
    /* stay in the same window */
  } 

  return false;
}

function setSubmit (button)
{
  submitName = button.value;
}

<form action="/findNames" onsubmit="return submitForm(this)">
  <input type="submit" value="Add" onclick="setSubmit(this)"/>
  <input type="submit" value="Find" onclick="setSubmit(this)"/>
</form>

(これは一例です。グローバル変数の数を最小限に抑えてください。)

繰り返しになりますが、戻り値がイベント ハンドラーfalseに返されると、フォームが送信されなくなります。イベントを処理した後にフォームを明示的に送信したい場合は、代わりsubmitに戻りたい場合があります。たとえば、フォームを検証し、検証が成功した場合は、属性を介してサーバーの応答を別のフレームに表示することができます。truesubmittarget

スクリプト コードにイベント リスナーを追加するよりも、イベント ハンドラー属性の利点は、実行効率が高く、下位互換性があり、標準に準拠していることです。欠点は、イベントがバブルしない場合、イベント ハンドラー コードを複製しなければならない場合があることです。(ここでは問題ではありません。)

イベント ハンドラー属性の欠点は、マークアップと関数が分離されていないことだと言う人もいるかもしれません。ただし、それについては自分で判断する必要があります。私の意見では、関数は常に特定のマークアップに関連付けられており、さまざまな DOM 実装を回避するために苦労することはほとんど価値がありません。

参照: DOM クライアント オブジェクト相互参照: DOM イベント

ここで最も重要なことは、クライアント側であらゆる改善を行っても、フォームは引き続きアクセス可能であることです。つまり、クライアント側のスクリプトがなくても、フォームは引き続きキーボードで機能します。サーバー側のスクリプト (ここでは: /findNames) はフォールバックとして機能し、クライアント側のスクリプトは不要なラウンドトリップを回避して、ユーザー エクスペリエンスを改善し、ネットワークとサーバーの負荷を軽減できます。

于 2013-04-12T16:49:24.110 に答える
3

イベントリスナーを適切にアタッチするには、コードをリファクタリングする必要があります。

まず、リスナーとして機能する関数を定義します。

function preventSubmission(e) {
    if (e.preventDefault) e.preventDefault();
    return false;
}

function find(){
    var width  = 1010;
    var height = 400;           
    var params = 'width='+width+', height='+height;     
    popupWin = window.open('find.do','windowname5', params);
    popupWin.focus();
}

次に、関連するフォーム要素への参照をキャッシュします。

var form = document.getElementById('my-form'),
    findButton = document.getElementById('find');

最後に、リスナーを DOM イベントに追加します。

if (form.addEventListener) {
    form.addEventListener("submit", preventSubmission);
    findButton.addEventListener("click", find);
} else {
    form.attachEvent("submit", preventSubmission);
    findButton.attachEvent("click", find);
}

完全に動作するデモは次のとおりです: http://jsfiddle.net/CQAHv/2/

于 2013-04-12T16:12:43.440 に答える
2

これをチェックしてください：

Javascript :

var clicked;
var buttons = document.getElementsByTagName("input");

for(var i = 0; i < buttons.length;i++)
{
    var elem = buttons[i];
    if(elem.type=="submit")
    {
        elem.addEventListener("click", function(){ clicked=this.value;}, false);
    }
}


window.onsubmit = function(e)
{
   alert(clicked);
    return false;
}

マークアップ:

<form action="/findNames">
    <input type="submit" value="Add" />
    <input type="submit" value="Find" />
</form>

クリックされたボタンの値が得られます。

jsFiddle : http://jsfiddle.net/hescano/v9Sz2/

注：テスト目的で、イベントのreturn false中にあります。onsubmit最初の jsFiddle サンプルには独自のものが含まれているため、このhttp://jsfiddle.net/hescano/v9Sz2/1/ (Chrome、Firefox でテスト済み)のように、 inside 内にwindow.onloadないすべてのものを追加することをお勧めします。window.onsubmitwindow.onload

于 2013-04-12T16:29:15.783 に答える