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

Question

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

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

{{!-- 回答内容の送信フォーム--!}}
<form id="answer-question" method="post">
  <button type="submit" class="btn btn-outline-secondary btn-choice" name="countA" value="1">
    [A] {{targetQuestion.ansA}}
  </button>
  <button type="submit" class="btn btn-outline-secondary btn-choice" name="countB" value="1">
    [B] {{targetQuestion.ansB}}
  </button>
</form>

{{!-- Modal --}}
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">年齢と性別を選択して下さい。</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="radio" name="gender" value="male" class="modal-gender-inp">
        <label for="inq1">男性</label>
        <input type="radio" name="gender" value="famale" class="modal-gender-inp">
        <label for="inq2">女性</label><br>
        <label>年齢</label>
        <select name="age" id="modal-age-inp"></select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="modal-submit">Save changes</button>
      </div>
    </div>
  </div>
</div>

const answerButton = document.querySelector('.btn-choice');
const modalSubmitButton = document.getElementById('modal-submit');
const modalGenderInp = document.querySelectorAll('.modal-gender-inp');
const modalAgeInp = document.getElementById('modal-age-inp');

answerButton.addEventListener('click', () => {
  fetch('/users/self.json').then((response) => {
    response.json().then((result) => {
      const { user } = result;
      if (user.age && user.gender) {
        // 年齢と性別が設定されていた場合回答内容をフォーム送信する
      }
      $(document.getElementById('exampleModalCenter')).modal(); 
    });
  });
});

modalSubmitButton.addEventListener('click', () => {
  const [chekedGenderInp] = [...modalGenderInp].filter((e) => e.checked);
  fetch('/users/self', {
    method: 'PATCH',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ age: modalAgeInp.value, gender: chekedGenderInp.value }),
  }).then(() => {
    //　年齢と性別をユーザー情報に保存した後、回答内容をフォーム送信する
  });
});

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

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

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

Answer 1

answerButton.addEventListener('click', (e) => {
  fetch('/users/self.json').then((response) => {
    response.json().then((result) => {
      const { user } = result;
      if (user.age && user.gender) {
        fetch(`/questions/${_questionId}`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ countA: 1 }),
        }).then(() => {
          window.location.href = `/questions/${_questionId}/result${_categoryKeywordParams}`;
        });
      } else {
        $(document.getElementById('exampleModalCenter')).modal();
      }
    });
  });
});

modalSubmitButton.addEventListener('click', () => {
  const [chekedGenderInp] = [...modalGenderInp].filter((e) => e.checked);

  fetch('/users/self', {
    method: 'PATCH',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ age: modalAgeInp.value, gender: chekedGenderInp.value }),
  }).then(() => {
    window.location.href = `/questions/${_questionId}${_categoryKeywordParams}`;
  });
});

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