jQueryを使って任意の要素をクリックした時にフォームを送信(投稿・submit)する

jquery
このエントリーをはてなブックマークに追加
PR

HTMLの<fomr>要素を使ってinput要素を送信するのを、jQueryで操作するものです。通常はform内にあるinputでtypeがsubmitのボタンを使ってフォーム内の内容を送信するのですが。それ以外の任意の要素に送信ボタンの機能を付ける事がjQueryで可能です。jQueryで任意の要素や、タイミングで送信を操作することで、見た目や動作を柔軟に出来ます。

 

jQueryでsubmitする

jQueryのsubmit()を使ってフォームを送信するには、フォームをセレクタで指定し submit() を付けるだけです。以下をそのまま使うと ページが開かれたすぐに実行されてしまいます。

$('#comment-form').submit();

 

clickをトリガーにフォームの送信をする

$(".send-btn").on("click",function(){
  $('#comment-form').submit();
});

このようにすると、clickを.send-btnという要素がクリックされたことをトリガーに #comment-form というidが付いたフォームの内容を送信します。さらにjQueryでinputの内容を自動的に決めるようなものにすれば

 

inputに値をjQueryで挿入する

$("#comment-form input").val("input要素に値を入れる");

例えば、このようにするとinputの入力欄の値をjQueryで挿入する事が出来ます。チェックボックスでチェックされたものをリスト化して一度に送信する場合などに使える。

 

クリックをトリガーに処理を挟んでから送信する

$(".send-btn").on("click",function(){
  var xxx = 処理結果等を入れる;
  $("#comment-form input").val(xxx);
  $('#comment-form').submit();
});

ほんのちょっとした例の形ですが、トリガーなる要素がクリックされた時にsubmit()でフォームが送信される前に、送信される内容を作って送信する事ができます。

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)