Javascriptでパラメーターを送信して、その値でデータを取得したい

Question

##やりたいこと
現在時刻表アプリを作ろうとしています。出発地の選択後、目的地の選択をして、Nextボタンが押されればSQLに保存した任意の時刻表を表示するようにしたいと思っています。

そのために「目的地」の選択がされて「NEXT」ボタンが押されれば、Javascriptで計算したある変数をrailsのcontrollerに送信して、その値を使ってデータ取得をしたいと思っています。

目的地のNextボタンのイメージはこんな感じです。(現在は代替えで別のaboutページに飛ぶようにしております)

##補足

getやpostか、Jqueryを使うのかと予想されるのですが、railsのコントローラーでどのように処理するかも含めてご教授お願い致します。

###コード
HTML

<section class="container">
    <p id="position"></p>
    <ul id="choices"></ul>
    <a id="btn" class="disabled">Next</a>
</section>

Js

'use strict';
console.log('Hello World!')

window.onload = function(){
  const position = document.getElementById('position');
  const choices = document.getElementById('choices');
  const btn = document.getElementById('btn');

  const quizSet = [
    {q: '出発地', c: ['A0', 'A1', 'A2']},
    {q: '目的地', c: ['B0', 'B1', 'B2']},
  ];
  let currentNum = 0;
  let departureNum = 0;
  let directionNum = 0;

  function checkAnswer(li) {
      document.querySelectorAll("li").forEach(el => el.classList.remove("select"));
      if (li.textContent === quizSet[0].c[0]) {
        departureNum = 1;
        console.log(departureNum);
        li.classList.add("select");
      } else if (li.textContent === quizSet[0].c[1]) {
        departureNum = 2;
        console.log(departureNum);
        li.classList.add("select");
      } else if (li.textContent === quizSet[0].c[2]) {
        departureNum = 3;
        console.log(departureNum);
        li.classList.add("select");
      } else if (li.textContent === quizSet[1].c[0]) {
        directionNum = 1;
        console.log(directionNum);
        li.classList.add("select");
      } else if (li.textContent === quizSet[1].c[1]) {
        directionNum = 2;
        console.log(directionNum);
        li.classList.add("select");
      } else if (li.textContent === quizSet[1].c[2]) {
        directionNum = 3;
        console.log(directionNum);
        li.classList.add("select");
      }
      btn.classList.remove('disabled');
    }

  function setQuiz() {
    position.textContent = quizSet[currentNum].q;

    while (choices.firstChild) {
      choices.removeChild(choices.firstChild);
    }

    quizSet[currentNum].c.forEach(choice => {
    const li = document.createElement('li');
    li.textContent = choice;
    li.addEventListener('click', () => {
        checkAnswer(li);
    });
    choices.appendChild(li);
  });
  }
  setQuiz();

  btn.addEventListener('click', () => {
    if (btn.classList.contains('disabled')) {
      return;
    }
    btn.classList.add('disabled');

    if (currentNum === quizSet.length - 1) {　//目的地を選択されれば、hrefが発生する
      let totalNum = departureNum + directionNum; //このtotalNumを送信したいです
      console.log(totalNum);
      btn.href = "./static_pages/about"　//ここのstatic_pagesコントロールで処理をする
    } else {
    currentNum++;
    setQuiz();
  }
  });
}

Answer 1

もしかして、JSは得意だがrubyは自信がない、とかありますか？

viewが全部は載っていないので想像ですが、載っている画面からみて、NEXTを押した時にJSを呼ばなくても、NEXTをsubmitにして選ばれた目的地を送る方がシンプルな気がします。
「NEXTしたときにJSで計算した値をつけて」とのことですが計算に必要な情報も付けて返せばよいだけで。
JSよりもrubyのほうが見通しがよいプログラムが書けると思います。

時刻表アプリ　なのに、Quiz とかあって？？？でもあります。

Comments

[tsuyoshi0126]

返信遅くなりすいません。

確認なのですが、JSの変数をrailsコントローラーに送信するより
HTMLのinput要素をrailsコントローラーに送信して処理する方が簡単ということでしょうか

物分かりが悪くて申し訳ありませんが、ご教授お願いします

[winterboum]

というか、、、
私はJSが不得意なので、RailsでできることはRailsでやりたいってのがあるのですが。。。
画面遷移なしに処理をするならJSが必要になるケースが多くなるかと思いますが、画面遷移するならrailsで処理できるのでは？と思ったのです

[tsuyoshi0126]

ご教授ありがとうございます。

私もrailsチュートリアルなどに取り組んだため、JSよりrailsの方が理解していると思われるので、画面遷移のアプローチに取り組んでみます。