問題 × 解決策

フォームの送信前に最終確認通知をcolorboxで表示する記述例

問題

フォームの送信前に最終確認通知をcolorboxで表示するには?

解決策

  • 送信ボタンのtypeをsubmitではなくbuttonにする。
  • 送信ボタンのクリックイベント「click(function(){ })」を作成する。
  • jQueryプラグイン「colorbox」で最終確認通知を表示する。
  • 最終確認通知の中にあるボタンのクリックにより、「$('form').submit();」で送信処理を行う。

フォームの送信前に最終確認の通知を出す

フォームの送信前に最終確認の通知を出す方法は様々あるとは思いますが、今回は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

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

19 − five =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧