質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

解決済

1回答

3135閲覧

テキストボックスに入力された値をモーダルで受け渡しする方法がわからない。

atsuyaaaaa1003

総合スコア7

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

0グッド

0クリップ

投稿2020/08/04 15:57

###前提・実現したいこと
アプリケーションのユーザ削除時、削除画面にてユーザパスワードを入力後、削除意思を確認するモーダルを表示させて、そこで「退会」を押下することで削除処理を実施するようにしたいです。モーダルを実装しない場合であれば、入力したパスワードをth:object="${deleteMemberModel}"にてセットしてControllerで簡単に受け取れるのですが、モーダルを実装すると、入力したパスワードをどのように受け渡しすれば良いのかわかりません。
粗い文章ですが、どなたかご教授いただければ幸いです。

####やってみたこと
id="deleteMemberBtn"のボタンにvalue="3"と生の文字列データを指定し、ボタン押下後にalertで受け取れていることは確認。

html

1<body> 2 <main> 3 <div class="py-3"> 4 <div class="container"> 5 <h3 class="mb-3">退会フォーム</h3> 6 <p>パスワードを入力し、「退会」を押してください。</p> 7 <form th:action="@{/deleteMember}" th:object="${deleteMemberModel}" method="post"> 8 <div class="form-group"> 9 <div class="col-md-3"> 10 <label for="name" class="col-form-label"> 11 パスワード <span class="badge badge-warning">必須</span> 12 </label> 13 </div> 14 <div class="col-md-9"> 15 <input type="password" class="form-control" id="name" th:field="*{password}" required 16 placeholder="パスワードを入力"> 17 </div> 18 </div> 19 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#deleteMemberModal" data-whatever="@mdo"> 20 退会 21 </button> 22 <a th:href="@{/menu/}" class="btn btn-primary btn-back">戻る</a> 23 </form> 24 </div> 25 26 <div class="modal" id="deleteMemberModal" tabindex="-1" role="dialog" aria-labelledby="deleteMemberModalLabel" aria-hidden="true"> 27 <div class="modal-dialog" role="document"> 28 <div class="modal-content"> 29 <div class="modal-header"> 30 <h5 class="modal-title" id="deleteMemberModalLabel">退会確認</h5> 31 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 32 <span aria-hidden="true">&times;</span> 33 </button> 34 </div> 35 <div class="modal-body"> 36 退会処理を行うとユーザ情報は削除され、元に戻すことはできません。 37 退会処理を行います。よろしいですか? 38 </div> 39 <div class="modal-footer"> 40 <button type="button" class="btn btn-primary" data-dismiss="modal" >閉じる</button> 41 <form method="post"> 42 <button type="submit" id="deleteMemberBtn" class="btn btn-primary" data-action="/deleteMember" value="3">退会</button> 43 </form> 44 </div> 45 </div> 46 </div> 47 </div> 48 </div> 49 </main> 50 51 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 52 53 <script type="text/javascript" th:inline="javascript"> 54 console.log('through'); 55 $('#deleteMemberBtn').click(function(event) { 56 var button = $(event.relatedTarget); 57 var recipient = button.data('whatever') 58 var selectNo = $(this).val(); 59 alert(selectNo); 60 alert() 61 $(this).parents('form').attr({ "method" : "post", 62 "action" : $(this).data('action') }); 63 }); 64 </script> 65 66</body>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

幾らでも方法はあるのですけど、簡単にするなら、モーダルも含めて全体をひとつのformで囲っては?
退会ボタンがモーダル起動のためでしかないのなら、そこでform閉じなくても良いと思います。

別解としては
JavaScriptのモーダルのformのsubmit押下イベントを拾った上でJavaScriptで入力値を取得しhiddenでもなんでも一時的な要素を生成してformにappendして送信する
とか、
Ajax
とか。

投稿2020/08/04 20:26

m.ts10806

総合スコア80850

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問