html - ボタン要素をクリックすると、IE が内部 HTML を送信する

Question

Web ページに次の html があります (簡略化)。

<button type="submit" name="action" value="ButtonA">Click Here</button>

Firefox では、「Action」フォーム値の値として「ButtonA」を送信します。ただし、IE7 では「Click Here」を送信します。これを解決する方法はありますか？フォームに返される値に影響を与えずにテキストをカスタマイズできるようにする必要があるため (ローカリゼーション)、input タグを使用したくありません。基本的に、同じ名前のボタンを複数持つことができ、その値に応じて、送信時に異なるアクションを実行できるようにしたいと考えています。この場合、IE を正しく動作させる簡単な方法はありますか?

[もっと]

多分私はもっと明確にする必要がありますが、使用できません

<input type="submit" name="Action" value="ButtonA">

フォームで送信されたボタンの実際の値に影響を与えずに、ローカライズルール用に表示されるテキストを変更できるようにする必要があるためです。

[もっと]

さらに詳しく説明すると、基本的には、言語に応じてボタンで「保存」または「Sauver」と言うことができますが、サーバーに送信される値は変更されません。また、同じ名前の複数のボタンを用意し、ボタン名に依存するのではなく、値に応じて何かを実行し、そのボタンに値があるかどうかをテストしたいと考えています。コードはすでにその観点から書かれており、既存のサーバー側処理コードなしで、値に表示されるテキストを変更できるようにしたいだけです。

これは、問題の非常に適切な説明と、いくつかの回避策が記載されたリンクです。

score 3 · Accepted Answer

1 つの解決策は、Javascript と隠しフィールドを使用することです。

   <input type="hidden" name="actionparam" value="DoNothing">
   <input type="button" onclick="OnSubmitForm('ActionA')" Value="Click Here for A" />
   <input type="button" onclick="OnSubmitForm('ActionB')" Value="Click Here for B" />


   function OnSubmitForm(actionname) {
    var f = document.frm;
    f.actionparam.value = actionname;
    f.submit();
 }

これは非表示の CATPCHA としても機能し、javascript 関数でクライアント検証を追加できます。

編集：

あなたは非 JavaScript ブラウザーに劣化させたいと言っているので、このバージョンを使用できます。これは、JavaScript を使用していないユーザーに対して 1 つのデフォルトアクションのみを許可します。

余分なボタンは HTML では無効になっていますが、javascript で再び有効になります。
テスト済みコード:

<html>
<head>
    <script type="text/javascript">
    <!--
    function OnSubmitForm(actionname) {
            var f = document.frm;
            f.actionparam.value = actionname;
            f.submit();
    }
    //-->
    </SCRIPT>
</head>
<body>
   <noscript>
        <div style="background-color: yellow; margin: 20px;" >
            You are using a limited version of the site because you don't have Javascript enabled
        </div>
    </noscript>


   <h1>form</h1>
    <form name="frm" method="post">
    <input type="hidden" name="actionparam" value="DefaultAction" />
    <button name="defaultbutton" type="submit">default action</button>
    <button name="extrabutton1" disabled onclick="OnSubmitForm('ExtraAction1')">Extra action 1</button>
    <button name="extrabutton2" disabled onclick="OnSubmitForm('ExtraAction2')">Extra action 2</button>
    </form>


   <h1>Results</h1>
   <h2>forms collection</h2>
   <ol>
   <%
   For x = 1 To Request.Form.count()
      Response.Write("<li>" + Request.Form.key(x) + "=" + Request.Form.item(x) + "</li>")
   Next
   %>
   </ol>


    <script type="text/javascript">
    <!--
    document.frm.extrabutton1.disabled = false;
    document.frm.extrabutton2.disabled = false;
    //-->
    </SCRIPT>

</body>
</html>

score 2 · Accepted Answer

button要素の IE6 の素晴らしい実装に対処する必要がありました。このソリューションはJavascript に依存していますが、便利な場合もあります。

buttonSpring フレームワークで AbstractWizardController を使用する場合、要素はウィザードの「次へ」、「戻る」、および「終了」ボタンの理想的なソリューションですが、IE6 では機能しないため、特に面倒です。

そのため、jQuery ベースの小さな修正プログラムを作成することになりました (ただし、jQuery ライブラリを使用する必要がないように変換するのは非常に簡単です)。

$(function(){
if((window.XMLHttpRequest == undefined) && (ActiveXObject != undefined)) {
    $('button').click( function(event) {
        var rx = /\bvalue ?= ?(".*?"|'.*?')/i;
        var matches = $(this)[0].outerHTML.match( rx );
        if( matches != null )
            $(this).attr( 'value', matches[1].substring( 1, matches[1].length - 1 ) );
        $('button').not( $(this) ).attr('disabled','disabled');
    });
}
});

これにより、すべてのボタン要素に onclick イベントが追加されます。ボタンをクリックすると、ボタンのouterHTMLが取得されます。例:

<button name="playerId" value="34">Walter Payton</button>

value 属性を解析します。値を取得するために行くのはgetAttributeNode('value').value大変なようですが、指定された値属性ではなく innerHTML を返すことがわかったので、あまり役に立ちませんでした。次に、正規表現のサブマッチをボタンの値として設定します。区切り文字として二重引用符または単一引用符を使用する場合は一致するはずですが、何らかの形式の区切り文字を使用する必要があります。

この結果、"Walter Payton" が投稿される代わりに、実際には "34" が投稿されます。欠点は、フォームが送信される直前に、ページ上のボタンの外観も「34」に変わることです。

最後に、スクリプトはクリックされたものを除くすべてのボタン要素を見つけ、それらのdisabled属性を無効に設定します。これにより、それらが POST に含まれず、誤検知が発生しないことが保証されます。

score 2 · Accepted Answer

input-submit で動作させるための通常の回避策は、値を複数の 'name' 属性に変更することです。

<input type="submit" name="submit.buttonA" value="Sausage" />
<input type="submit" name="submit.buttonB" value="Mash" />

私が個人的に使用するフォームレイヤーは、値が「buttonA」または「buttonB」の「送信」コントロールがクリックされたかのように自動的に変換しますが、ほとんどの環境では手動で簡単に行うことができます。

score 1 · Accepted Answer

このコンセプト全体を考え直すべきだと思います。私はあなたのシナリオが次のようになると感じています：

ユーザーが[保存]または[キャンセル]をクリックします
サーバー側では、「保存」または「キャンセル」の値を確認します
これに基づいてアクションを実行します

実際には、[保存]ボタンの値は重要ではありません。たとえば、PHPでは、Save要素の値を確認するだけです。値が「保存」か「ザウバー」かに関係なく、保存機能を実行できます。

ここで基地から離れている場合は、お詫び申し上げます。私の仮定が正しいかどうか教えてください。

score 1 · Accepted Answer

Eduardo が言及しているように、JavaScript が最良の選択肢のように思えます。ただし、ユーザーが JavaScript を無効にしている場合、適切な値が得られないという事実をどうにかして考慮する必要があります。

score 1 · Accepted Answer

朗報: Microsoft は IE8 でこれを修正しました (標準モードのみ)

悪いニュース: まだベータ版です

このjQuery の修正は問題なく機能します。または、独自の JS をハックして IE を処理することもできます。

ボタン上での入力を提案している場合は問題ありませんが、ボタンにグラフィックや異なるスタイルが必要な場合は、ボタンが唯一の方法です。

score 1 · Accepted Answer

質問で提供したリンクは、IE6 がすべてのフォーム送信ですべてのボタンを送信することを説明しているため、使用する回避策に関係なく、アプリは IE6 で動作しません。私はこれをテストし、IE6 が実際にこれを行うことを確認しました。これは、Javascript がないと <button> タグが IE6 では役に立たないことを意味し、その他の制限があるため、IE7 でも厳しく制限されます。私が考えることができる Javascript 以外の唯一の回避策は、 <button> タグをメインの <form> の外に独自のフォームで配置することです。<a> タグでもこれを行うことができますが、リンクは常に GET リクエストであり、GET リクエストにはデータの変更などの副作用が発生しないため、お勧めできません。

<div style="float:left">
  <form name="shoppingCart" action="#c" method="GET">
    <input type="hidden" name="item1" value="hat">
    <input type="text" name="item1quantity" value="1"> Hat, red<br>
    <input type="hidden" name="item2" value="scarf">
    <input type="text" name="item2quantity" value="1"> Scarf, red<br>
    <button type="submit" name="button" value="purchase">Buy now!</button>
  </form>  
</div>
<div style="float:right">
  <form name="remove" action="#a" method="GET">
    <input type="hidden" name="item" value="item1">
    <button type="submit" name="button" value="delete1">Remove this item</button>
  </form>
  <form name="remove" action="#b" method="GET">
    <input type="hidden" name="item" value="item2">
    <button type="submit" name="button" value="delete2">Remove this item</button>
  </form>
</div>

複数のフォームを使用することの欠点は、送信できるものが限られていることです。ユーザーが上記のフォームで数量を変更すると、ユーザーが [削除] をクリックしたときにその情報は送信されません。しかし、JS を使用していないユーザーにとっては適切な劣化と見なすことができ、JS を使用してメインフォームのデータを非表示のフォームと同期させることができます。

score 0 · Accepted Answer

このie-button-fixプロジェクトをチェックしてください。これは、IE の動作 (つまり、javascript) を使用して問題をきちんと解決します。

score 0 · Accepted Answer

0

<input type="submit" />の代わりにを使用する必要があると思います<button>。

于 2008-12-18T17:51:07.933 に答える

score 0 · Accepted Answer

<input>の代わりに使用し<button>ます。それ以外の場合は、jQuery ベースの素敵なハックの説明を次に示します。

score 0 · Accepted Answer

JavaScript (または奇妙なマルチフォーム構造) を必要とせずに IE7 (または IE6) で動作させる方法がわかりません。

ローカライズされてバックエンドからアクセスできるようになっていませんか? たとえば、テキストはデータベースから来ているのでしょうか、それともローカルテンプレートにインライン化されるだけでしょうか? 印刷時とバックエンドでフォームを検証する際の両方で、ラベルのローカライズされたバージョンを取得できるはずです(実際にできるはずなので、変更されていない値を使用したいだけです)。行う）？

JavaScriptソリューションは常にあります...

以下は、既製の jQuery ワンライナーよりも微調整が必要な概念実証ですが、HTML を変更しなくても動作するはずです。

<!doctype html>
<html>

<head>

<title>Fix Buttons in IE6</title>

<script type="text/javascript">
function fixButtons() {
    var btns = document.getElementsByTagName('button');

    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = fixValue;
    }
}

function fixValue() {
    var btns = document.getElementsByTagName('button');

    for (var j = 0; j < btns.length; j++) {
        if (this == btns[j]) {
            this.value = this.getAttributeNode('value').value;
        }
        else {
            btns[j].parentNode.removeChild(btns[j--]);
        }
    }
}
</script>

</head>

<body onload="fixButtons()">

<form action="" method="get">
    <button type="submit" name="action1" value="value1">Do Action 1</button>
    <button type="submit" name="action2" value="value2">Do Action 2a</button>
    <button type="submit" name="action2" value="value3">Do Action 2b</button>
</form>

</body>

</html>

IE6 ではなく IE7 でのみ動作する必要がある場合、fiXValue()関数は次のように縮小できます。

this.value = this.getAttributeNode('value').value

score -1 · Accepted Answer

JavaScript を使用しない簡単な回避策は次のとおりです。

<button type="submit" name="action" value="ButtonA" onclick="this.value='ButtonA'">Click Here</button>

html - ボタン要素をクリックすると、IE が内部 HTML を送信する

12 に答える 12

編集：

Related

Reference