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

Tweet

238

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()でフォームが送信される前に、送信される内容を作って送信する事ができます。

Tweet

短縮URL:

2015年05月01日 WEB制作系 コード・プラグイン javascriptjQuery