16

ボタンがクリックされたときにjQueryを使用してフォームを送信しています。次に、ボタンの値をテストしたいと思いますが、これは Safari と Chrome では送信されません。なんで？回避策はありますか？

次のコードを IE/FF でテストして動作することを確認してから、Safari/Chrome でテストして動作しないことを確認します。

ButtonPostTest.php:

<?php
    if(isset($_POST['testBtn'])) {
        echo $_POST['testBtn'];
    }
?>
<html>
    <head>
    <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#btn').click(function() {
                    $('form').submit();  // submit the form
                });
            });
        </script>
    </head>
    <body>
        <form action="" method="post">          
            <button id="btn" class="page-btn" type="submit" name="testBtn" value="Yes Button value is posted!">POST IT!</button>
        </form>
    </body>
</html>

アップデート：

同じことが起こりinputます：

<input id="btn" class="page-btn" type="submit" name="testBtn" value="Post this"></input>

また、これは jQuery を使用して送信する場合にのみ問題になり.submit()ます。これがないと、ボタンまたは入力のいずれかで問題なく送信されます。

4

10 に答える 10

2

ロバートが上で言ったように、タグを使用するときはとの<button>両方が必要です。name=""value=""

<button name="Search" value="Simple" type="submit">Search</button>

VS

<button name="Search" value="Advanced" type="submit">Search</button>

この例では、POST データには次のKey -Valueペアが含まれます。

シンプルに検索

また

詳細検索

そして、その POST 値に基づいて、コードを記述して適切なアクションを実行できます。:)

つまり、入力を使用する必要はありません。名前/値でボタンを使用するだけで問題ありません。

于 2013-10-30T03:06:28.747 に答える
2

Webkit のバグを発見したと思います。

あなたのフォームであるChromeで同じことをテストしています：

<form action="" method="post">          
   <button id="btn" class="page-btn" type="submit" name="testBtn" value="Yes Button value is posted!">POST IT!</button>
</form>

これはデータを送信しません。ただし、別の要素、特に入力を追加すると:

<form action="" method="post">          
   <input type="hidden" name="shim" value="" />
   <button id="testBtn" class="page-btn" type="submit" name="testBtn" value="Yes Button value is posted!">POST IT!</button>
</form>

これにより、両方の値が送信されます。これは JavaScript なしです。shim hidden form 要素を追加すると、それが理にかなっているように見えます。

このソリューションにはさらにテストが必要ですが、ニーズに対応できる可能性があります。

于 2012-07-08T06:15:14.463 に答える
1

それで、私は非常によく似たことが私に起こりました。Chrome [バージョン 78.0.3904.108 (公式ビルド) (64 ビット)] を除いて、すべてが機能します。

<button> で id= を取り出したところ、うまくいきました! しかし、それは問題ではありませんでした。問題は、(ボタン id= を使用して) <button> タグの onclick= で [送信] ボタンを無効にしていることが判明しました。これを行うと、Chrome は何も投稿しないように見えます。ちょっと無意味なのはどれですか？そして奇妙な？そして、私には理由がわかりませんか？

そこで私は膨大な時間を費やして掘り下げ、<フォーム> の onsubmit= で [送信] ボタンを無効にできることを発見しました。実際、onsubmit= は onclick= とほぼ同じなので、将来的には、常に onsubmit= を使用するように変更する必要があると思います。そうすれば、すべての大きなブラウザが引き続き機能します。

于 2019-12-04T01:52:56.260 に答える
0

<button>と<input>は 2 つの異なるタグです。ボタンの値を送信する場合は、<input>タグを使用します。

于 2012-07-08T05:20:10.610 に答える
0

Vins に同意します。おそらく<input>.

<button>の代わりに使用している特定の理由はあり<input>ますか? 私は通常、<button>（アイコンと画像を追加できるようにする）を好みますが、値がどのように解釈されるかに関して、ブラウザ間で違いがあると思います...

w3schools Mozilla Developer Networkによると、一部のブラウザーは value 属性を送信しますが、IE7 などの他のブラウザーはタグ間のテキストを誤って送信します。

于 2012-07-08T05:32:08.503 に答える
0

非表示の入力をキャッチして、ボタンを送信として送信するには、このようにしてください。

PHP:

<?php
    if(isset($_POST['btname']))
        echo $_POST['btname'];
    }
 ?>

およびhtml：

<form method="POST" action="" id="formname" name="formname">
<input name="btname" id="btname" type="hidden" />
<button onclick="document.formname.submit()" value="Submit">Send</button>
</form>
于 2013-12-05T02:32:26.267 に答える
0

送信/クリック イベント中に無効化されたボタンがその値を送信しない

Alan Stewart によると、「送信」をリッスンしてボタンを無効にするフォーム送信ボタンをダブルクリックしないようにする小さなユーティリティを作成したときに、この問題が発生しました。

コードを変更して、フォームが既に送信されているかどうかを判断し、送信されている場合はボタンを無効にして、フォームを経由して送信できないようにしましたevent.preventDefault()。

すぐに視覚的なフィードバックを提供するボタンをすぐに無効にする以前ほど良くはありません (Bootstrap には無効なボタンのスタイルがあるため)。

于 2020-11-05T16:49:20.897 に答える