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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

解決済

1回答

946閲覧

フォーム送信時に分岐をかけてモーダルを表示させたい

maskmelon

総合スコア63

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

0クリップ

投稿2020/09/08 04:35

Express.jsで二択の質問にユーザーが回答し集計結果を表示させるアプリを作成しています。質問に回答する際に、ユーザー情報に年齢と性別が含まれている場合にはそのまま回答内容をフォーム送信し、含まれていない場合にはモーダル画面で年齢と性別を設定させた後に回答内容をフォーム送信したいです。

分岐をかけてモーダルを表示させて年齢と性別をユーザー情報に保存することはできたのですが、年齢性別情報の保存後、あるいはすでに年齢と性別が設定されていた場合に、元の回答内容のフォームを送信を行う処理をどのように書けばよいのか分かりませんでした。

hbs

1{{!-- 回答内容の送信フォーム--!}} 2<form id="answer-question" method="post"> 3 <button type="submit" class="btn btn-outline-secondary btn-choice" name="countA" value="1"> 4 [A] {{targetQuestion.ansA}} 5 </button> 6 <button type="submit" class="btn btn-outline-secondary btn-choice" name="countB" value="1"> 7 [B] {{targetQuestion.ansB}} 8 </button> 9</form> 10 11{{!-- Modal --}} 12<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> 13 <div class="modal-dialog modal-dialog-centered" role="document"> 14 <div class="modal-content"> 15 <div class="modal-header"> 16 <h5 class="modal-title" id="exampleModalCenterTitle">年齢と性別を選択して下さい。</h5> 17 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 18 <span aria-hidden="true">&times;</span> 19 </button> 20 </div> 21 <div class="modal-body"> 22 <input type="radio" name="gender" value="male" class="modal-gender-inp"> 23 <label for="inq1">男性</label> 24 <input type="radio" name="gender" value="famale" class="modal-gender-inp"> 25 <label for="inq2">女性</label><br> 26 <label>年齢</label> 27 <select name="age" id="modal-age-inp"></select> 28 </div> 29 <div class="modal-footer"> 30 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 31 <button type="button" class="btn btn-primary" id="modal-submit">Save changes</button> 32 </div> 33 </div> 34 </div> 35</div>

JavaScripts

1const answerButton = document.querySelector('.btn-choice'); 2const modalSubmitButton = document.getElementById('modal-submit'); 3const modalGenderInp = document.querySelectorAll('.modal-gender-inp'); 4const modalAgeInp = document.getElementById('modal-age-inp'); 5 6answerButton.addEventListener('click', () => { 7 fetch('/users/self.json').then((response) => { 8 response.json().then((result) => { 9 const { user } = result; 10 if (user.age && user.gender) { 11 // 年齢と性別が設定されていた場合回答内容をフォーム送信する 12 } 13 $(document.getElementById('exampleModalCenter')).modal(); 14 }); 15 }); 16}); 17 18modalSubmitButton.addEventListener('click', () => { 19 const [chekedGenderInp] = [...modalGenderInp].filter((e) => e.checked); 20 fetch('/users/self', { 21 method: 'PATCH', 22 headers: { 23 'Content-Type': 'application/json', 24 }, 25 body: JSON.stringify({ age: modalAgeInp.value, gender: chekedGenderInp.value }), 26 }).then(() => { 27 // 年齢と性別をユーザー情報に保存した後、回答内容をフォーム送信する 28 }); 29}); 30

なお、回答内容のフォーム送信先URLはクエリを含むためJavaScriptで以下のように動的に変更しています。

JavaScript

1const answerQuestion = document.getElementById('answer-question'); 2const _questionId = window.location.href.split('/questions/')[1].split('?')[0]; 3answerQuestion.setAttribute('action', `/questions/${_questionId}${categoryKeywordParams}`);

そもそもモーダルを挟んで元のフォーム処理を行うことが可能であるかどうかよく分かっていないのですが、もし可能であればアドバイスを頂けると幸いです。

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

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

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

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

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

guest

回答1

0

自己解決

JavaScript

1answerButton.addEventListener('click', (e) => { 2 fetch('/users/self.json').then((response) => { 3 response.json().then((result) => { 4 const { user } = result; 5 if (user.age && user.gender) { 6 fetch(`/questions/${_questionId}`, { 7 method: 'POST', 8 headers: { 9 'Content-Type': 'application/json', 10 }, 11 body: JSON.stringify({ countA: 1 }), 12 }).then(() => { 13 window.location.href = `/questions/${_questionId}/result${_categoryKeywordParams}`; 14 }); 15 } else { 16 $(document.getElementById('exampleModalCenter')).modal(); 17 } 18 }); 19 }); 20}); 21 22modalSubmitButton.addEventListener('click', () => { 23 const [chekedGenderInp] = [...modalGenderInp].filter((e) => e.checked); 24 25 fetch('/users/self', { 26 method: 'PATCH', 27 headers: { 28 'Content-Type': 'application/json', 29 }, 30 body: JSON.stringify({ age: modalAgeInp.value, gender: chekedGenderInp.value }), 31 }).then(() => { 32 window.location.href = `/questions/${_questionId}${_categoryKeywordParams}`; 33 }); 34}); 35

フォーム送信ではなく、上のように全てJavaScript側で処理を行うことで一応解決することができました。ただモーダル画面の送信後に回答内容をポストする処理は書けておらず、回答前の画面を再表示させるに留まっています。

投稿2020/09/08 13:55

maskmelon

総合スコア63

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問