web-dev-qa-db-ja.com

「div」ボタンでフォームを送信するにはどうすればよいですか？

Divを使用してボタンのHTMLを生成するASP.Netコードを使用して、目的の外観と動作を実現します。この質問は、ASP.NetコードによるHTML生成に関するものです。

標準ボタンは簡単です。ページの場所を変更するには、divのonClickイベントを設定するだけです。

<div name="mybutton" id="mybutton" class="customButton" onClick="javascript:document.location.href='wherever.html';">
Button Text
</div>

これはうまく機能しますが、このようなボタンが存在するフォームを送信したい場合、次のようなものを想像していました：

<form action="whatever.html" method="post">
    <div name="mysubmitbutton" id="mysubmitbutton" class="customButton" onClick="javascript:this.form.submit();">
    Button Text
    </div>
</form>

しかし、それは機能しません:(誰もが輝くアイデアを持っていますか？

htmlasp.netformssubmit
29
Jimbo
_onClick="javascript:this.form.submit();">
_

this div onclickには属性formがありません。this.parentNode.submit()またはdocument.forms[0].submit()を試してください

また、onClickはonclickである必要があり、一部のブラウザはonClickで動作しません

36
YOU

<button>要素を知っていますか？ <button>要素は<div>要素と同様にスタイル設定でき、type="submit"を持つことができるため、javascriptなしでフォームを送信します。

<form action="whatever.html" method="post">  
    <button name="mysubmitbutton" id="mysubmitbutton" type="submit" class="customButton">  
    Button Text
    </button>  
</form>

<button>を使用することもセマンティックですが、<div>は非常に汎用的です。以下の特典が無料で得られます。

  • フォームを送信するためにJavaScriptは必要ありません
  • アクセシビリティツール、例えばスクリーンリーダーは、（正しく）ボタンとして扱い、通常のテキストフローの一部ではありません
  • <button type="submit">は「デフォルト」ボタンになります。これは、リターンキーが自動的にフォームを送信することを意味します。 <div>でこれを行うことはできません。別のkeydownハンドラーを<form>要素に追加する必要があります。

1つの（非）警告があります：<button>は フレージングコンテンツ のみを持つことができますが、要素を使用してフォームを送信するときに他のタイプのコンテンツが必要になることはほとんどありません。

38
Andy E

HTMLタグでonClickを使用するのではなく、1つの場所でスクリプトを保持するには、スクリプトブロックに次のコードを追加します。

$('#id-of-the-button').click(function() {document.forms[0].submit()});

これは、ページにフォームが1つしかないことを前提としています。

4
R Tobin

誰もが物事を複雑にしなければならないのはなぜですか。 jQueryを使用してください！

<script type="text/javascript">
  $(document).ready(function() {
    $('#divID').click(function(){
      $('#formID').submit();
    )};
    $('#submitID').hide();
  )};
</script>

<form name="whatever" method="post" action="somefile.php" id="formID">
  <input type="hidden" name="test" value="somevalue" />
  <input type="submit" name="submit" value="Submit" id="submitID" />
</form>

<div id="divID">Click Me to Submit</div>

Divはフォームを送信する必要さえありません。ここで不足している唯一のものは、jquery.jsのインクルードです。

また、jQueryによって非表示になっている[送信]ボタンがあるため、互換性のないブラウザーを使用すると、送信ボタンが表示され、ユーザーがフォームを送信できるようになります。

0
DarkLotus

注意点がいくつかあります。

  1. JavaScript非対応のクライアントはフォームを送信できません
  2. W3c仕様では、HTMLのネストされたフォームは許可されていません。最近のブラウザーでは、このフォームのアクションタグとメソッドタグが無視され、他のASP.NETコントロールが正しくポストバックしなくなる可能性があります（フォームが閉まっている）。

適切なASP.NETポストバックとして処理する場合は、フレームワークによって提供されるメソッド、つまり__doPostBack(eventTarget, eventArgument)を呼び出すことができます。

<div name="mysubmitbutton" id="mysubmitbutton" class="customButton"
     onclick="javascript:__doPostBack('<%=mysubmitbutton.ClientID %>', 'MyCustomArgument');">
  Button Text
</div>
0
Zhaph - Ben Duguid