マイナス面：いいえJavascriptを - リンクを送信しますか？

StackOverflow https://stackoverflow.com/questions/1473999

質問

私は先日啓示に出くわしました。画像を使用して送信ボタンを作成しようとすると、私は画像が表示されなかった問題に遭遇したが、valueテキストでした。当時、これは私が欲しかったものではありませんが、私は振り返ってみると、今、私はこのためにいくつかの潜在的な使用を参照してください。

あなたが別のページにデータを送信する必要がある場合は、それのどれもが、ユーザー入力を必要としない、あなたはGETを介して、またはPOSTを経由してフォームをリンク（またはフォーム）でそれを送ることができます。問題は、前者は醜いURLを作成し、後者は場違いに見えるsubmitボタンを必要とすることです。もちろん、私はイメージを思い付くが、私はちょうど選択可能なテキストを望んでいた場合はどのような可能性があります。

だから、私は少し周りを演奏とFirefoxがフォームを送信クリック可能なリンクとして、私が望むどのように次のことをレンダリングするために表示され始めました。あなたがしなければならないsrcタグからinput type='image'属性を削除されます：

<form action='some_page' method='post'>
  <input type='hidden' name='email_address' value='test@test.com' />
  <input type='image' value='E-mail User' />
</form>

他のブラウザでこのソリューションの仕事をしていますか？欠点は、（脇あなたのリンクのCSSが正しく適用されていないという明白な事実から）これを行うには何ですか？

役に立ちましたか？

解決

IはNOSCRIPTタグ内のボタンと連動してジャバスクリプトを介して露出されます実際のリンク（非表示）を使用して溶液を好む。

 <form action="some_page" method="post">
    <input type="hidden" name="email_address" value="test@test.com" />
    <a href="#" class="submit-link" style="display: none;">E-mail User</a>
    <noscript>
       <input type="submit" value="E-mail User" />
    </noscript>
 </form>

 $('submit-link').click( function() {
     $(this).closest('form').submit();
     return false;
 })
 .show();

他のヒント

画像入力を使用する必要はありません、なぜ普通のボタンを提出し、それが通常のテキストのように見えるようにするために、いくつかの重い利きのスタイルを適用使わないのでしょうか？

<input type="submit" value="E-mail User" class="link">

<style>
input.link {
    border: none;
    background: none;
    cursor: pointer;
    /* etc */
}
</style>

それはFF3.5ではなく、IE8やChromeで働いたHTML 4.01ストリクトを使用します。リンクは動作しますが、不足している画像には、テキストだけで空白のスポットがありません。

ですから、これは、それが唯一のブラウザ上で動作する可能性があるため、悪い考えであるように思われます。あなたの唯一の市場は、Firefoxのブラウザのために、そして、先に行く素晴らしいアイデアでない限り、私にとってそれは、かなり大きな欠点です。 ：）

ジェームズ・スキッドモアが示唆したように、

、ポストとしてそれを提出するJavaScriptでのonclickを行うことは容易である。

私は控えめなJSを示唆している、そう、誰かが、その後にJSを持っていない場合には、GETの提出を行って、リンクとして動作しますが、彼らはJSを持っている場合、それは無い醜いURLにPOSTする動作を変更します変更ます。

または、画像の背景がフォームの背景に溶け込むことができる述べたように。

あなたが代わりにJS経由で動的にフォームを送信、または透明または白色の背景との定期的な送信ボタンを使用することができます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top