複数のformタグとhidden_fileldの値の受け取り【rails】

Question

実現したいこと

決済機能で複数のプランを用意したので、決済に関するテーブルにプランそれぞれにhidden_fieldで番号を割り振って入れようとしたいのですが、２つ目のプランを決済登録しても１つ目のプランが登録されます。
viewページには2つのプランがあるため、formタグが二つあります。
どちらもcreateメソッドで処理されるような指定を行っています。
同じページにフォームタグが複数あるのは駄目なのでしょうか？

発生している問題・エラーメッセージ

複数のフォームタグからhidden_fieldで2の値を送りたいフォームタグから操作を行ったが1の値が収納されていた。

該当のソースコード

<%= form_with model: @team, url: teams_path, local: true do |f| %>
    <article>
      <% if flash[:error].present? %>
        <div id="error_explanation">
          <p><%= flash[:error] %></p>
        </div>
      <% end %>

      <label class="amount">
        <span>ノーマルプラン</span>
      </label>
    </article>

    <script src="https://checkout.stripe.com/checkout.js" 
            class="stripe-button"
            data-key = "pk_test_"
            data-description="月額支払い"
            data-name="ノーマルプラン"
            data-amount="500"
            data-locale="ja"
            data-currency="JPY"
            data-label="支払い">
     </script>
     <%= f.hidden_field :plan_number, :value => 1 %>
<% end %>

<%= form_with model: @team, url: teams_path, local: true do |f| %>
    <article>
      <% if flash[:error].present? %>
        <div id="error_explanation">
          <p><%= flash[:error] %></p>
        </div>
      <% end %>

      <label class="amount">
        <span>エキスパートプラン</span>
      </label>
    </article>

    <script src="https://checkout.stripe.com/checkout.js" 
            class="stripe-button"
            data-key = "pk_test_"
            data-description="月額支払い"
            data-name="エキスパートプラン"
            data-amount="800"
            data-locale="ja"
            data-currency="JPY"
            data-label="支払い">
     </script>
     <%= f.hidden_field :plan_number, :value => 2 %>
<% end %>

<% if @team %>
  <%= link_to "解約する",@team, method: :delete, data: { confirm: "解約しますがいいですか?"}%>
  <p>登録日が月末付近の場合ご注意ください</p>
<% end %>

def new
    @user = current_user
    @team = Team.find_by(user_id: @user.id)
  end
  
  def create
    @team = Team.new(user_id: current_user.id)
    customer = Stripe::Customer.create({
      source: params[:stripeToken],
    })
    @team.plan_type = params[:plan_type]
    if @team.plan_type == 1
      @team.plan_id = "price_************************"
    elsif @team.plan_type == 2
      @team.plan_id = "price_*************************"
    end
    subscription = Stripe::Subscription.create({
      customer: customer.id,
      items: [{price: @team.plan_id}],
    })
    @team.customer_id = customer.id
    @team.stripe_subscription_id = subscription.id
    @team.active_until = Time.zone.at(subscription.current_period_end)
    if @team.save
      flash[:success] = "成功しました"
      redirect_to root_url
    else
      render 'new'
    end
  end

試したこと

formタグをforやwithで試しましたが、特に変わりはありませんでした。
params[:plan_number]も試したのですが、変わらずplan_numberに1が代入されました。

補足情報（FW/ツールのバージョンなど）

ruby 3.2.2
rails 6

Comments

[maisumakun]

stripeのボタンを使っているようですが、stripe側のガイドにそのあたりの記載はありませんでしたか？

[maisumakun]

あと、RailsサイドのTurboやTubolinksは適用していますか？

（これらは、ビューにJavaScriptを直書きしたものとの相性は最悪です）

[student]

Tubolinksを利用しています。
またStripeはチェックアウトというフォーム欄を使うやり方が多かったので、scriptを使いました。
すみません。
scriptタグからボタンが表示されて、クリックすると決済フォームが表示されて、そこに決済ボタンも表示されていて決済ボタンを押すとteams_controllerのcreateメソッドで処理されて、決済されるという流れです。

[student]

もしかしたら単純にhiddenフォームからの受け取りが出来ていないのかもしれません。

Answer 1

解決しました。
@team.plan_type = params[:plan_type]で受け取る事が出来てしっかりとプラン別に選択して決済できるようになりました。

Answer 2

htmlのsubmitでは submitを囲んでいる<form> ,,,, </form> の情報のみ送られます。
複数の form のデータを送るには javascriptでデータを合成してjavascriptでリクエストする必要があります。
ですので「同じページにフォームタグが複数あるのは駄目」ではないですが一手間必要です。

しかし、、、
viewを見ると送りたい という hiddenは共に f.hidden_field :plan_number, です。
この場合 name が同じになるので片方のデータは送られません。
しかし、、、
submit になるような要素がviewに見当たらない。
viewのどの部分をclickすると送信されるのですか？ そこを押すと javasript が動く
のだと思いますが clickできる要素が見当たらない。
<span>ノーマルプラン</span> <span>エキスパートプラン</span> ここ？
それで起動するJSのcodeがないとわからんですね。

後も一つ
if @team.plan_number = 1 は 常に true 扱いですから else の方には行きません
また
if @team.plan_number = 1
@team.plan_id = "price_"
else @team.plan_number = 2
@team.plan_id = "price_"
end
の else @team.plan_number = 2 は通った？ elsif でないのに、。、、、
あと
if でも else でも やることは一緒 @team.plan_id = "price_" なので if で場合分けする必要なし ですが、ここはまだ未完成？

Comments

[maisumakun]

> viewのどの部分をclickすると送信されるのですか？ そこを押すと javasript が動く
のだと思いますが clickできる要素が見当たらない。

おそらくですが、StripeのJavaScriptで何かしら生成するものと思われます。

[winterboum]

ああ、、、、