問題
フォームの送信前に最終確認通知をcolorboxで表示するには？
解決策
- 送信ボタンのtypeをsubmitではなくbuttonにする。
- 送信ボタンのクリックイベント「click(function(){ })」を作成する。
- jQueryプラグイン「colorbox」で最終確認通知を表示する。
- 最終確認通知の中にあるボタンのクリックにより、「$('form').submit();」で送信処理を行う。
フォームの送信前に最終確認の通知を出す
フォームの送信前に最終確認の通知を出す方法は様々あるとは思いますが、今回はcolorboxで表示する記述例をご紹介します。
以下の記事を応用しています。ぜひご覧ください。
画像だけでなく、HTML要素をポップアップ表示するjQueryプラグイン「colorbox」
フォームの送信前に何らかの処理を挟む方法
DEMOはこちら
- ※実際に「送信」を行ってもデータが送信されることはありません。
- ※「送信」ボタンをクリックすると、ポップアップが表示されるので、その中の「送信する」をクリックして初めて送信処理がされます。
送信を行ってよろしいですか？
フォームの作成
まず、フォームの作成を行います。
HTML
<form action="" method="post" class="test">
<p class="formbottom">
<input type="button" value="送信" class="btns submit">
</p>
</form>ポイント!
送信ボタンのtypeをsubmitではなく、buttonにします。
フォームの送信前に処理を行う記述例
フォームの送信前に処理を行う記述例は以下となります。
送信ボタンにクリックイベントを作成します。
$("form.test input[type='button']").click(function(){
trigger();
function trigger(){
$('a.colorbox-trigger').colorbox({
inline: true,
maxWidth: '90%',
maxHeight: '70%',
open: true,
onComplete: onPopupOpen,
onClosed: onPopupClose
});
$('a.colorbox-trigger').click();
}
function onPopupOpen(){
$(".list-format").focus();
lastFocus = document.activeElement;
}
function onPopupClose(){
lastFocus.focus();
}
$(".list-format").find('.btns a').click(function(event){
event.preventDefault();
$('form.test').submit();
})
});ポイント!
- colorboxを表示させるため、「$(‘a’).colorbox()」＋「$(‘a’).click()」を行うことで起動させることができます。
- 「$(‘form’).submit();」を行うことで、フォームの送信処理を実行することができます。
参照
以下のサイトが、より詳しく解説してくれています。
【jqueryのcolorboxを読込直後に開きたい -ある書籍に記載されていた、以- JavaScript | 教えて!goo】
https://oshiete.goo.ne.jp/qa/6383329.html
コメント