Rails/Ajax/ jQuery: Pass multiple params from jquery to Rails controller

Question

I need to pass two params (selected option & selected number of persons) from radio buttons through jquery to Rails controller via ajax and would appreciate any help at all on how to do so. Both params are needed to calculate pricing (please see @price code in controller below) and right now I'm only able to pass one param at a time for the calculation.

My form html code is shown below:

    <%= form_for @cartedactivity, url: carted_activities_path, method: :post, remote: true do |f| %>
                    1. Choose option
                        <div class = "options">
                            <center> 
                                <% @options.each do |option| %> 
                                    <div class = "radio" id = "option_radio">
                                        <%= f.radio_button :supplier_activity_option_id, option.id, :onclick => "save_option();" %>
                                        <%= f.label :supplier_activity_option_id, option.option_name, :value => option.id %>
                                    </div>
                                <% end %> 
                            </center>
                        </div>


            <h5>2. Number of Persons</h5>
                <div class = "numbers">
                    <center>
                        <h5>
                            <%@numbers.each do |number| %>
                                <div class = "radio" id = 

"quantity_radio">
                                        <%= f.radio_button :activity_quantity, number, :onclick => "save_quantity();" %>
                                        <%= f.label :activity_quantity, number, :value => number %>
                                    </div>
                                <% end %> 
                            </h5>
                        </center>
                    </div>

                <h5>3. Start date
                <%= f.date_field :activity_date, min: (Date.today+2.days), max: (Date.today+4.months)%>
                </h5>

            <hr>

            <div id = "check-price-<%=@option%>"></div>


            <div class = "booking-btn">
                <%= f.submit "Add to Cart", class: "btn btn-book" %>
            </div>

        <% end %> 
    </div>
    </div>

<br><br>



<script> 

function save_option() 
    {var optionValue = $('input[name = "carted_activity[supplier_activity_option_id]"]:checked').val();
    if (optionValue) {
            $.ajax({
            type:    "POST",
            url:     "/supplier_activities/price_check",
            data:    { optionValue },
            success: function(post){ console.log('success') },
            error:   function(post){ console.log(this) }
          });
    }
};

function save_quantity() 
    {var quantityValue = $('input[name = "carted_activity[activity_quantity]"]:checked').val();
    if (quantityValue) {
        $.ajax({
            type:    "POST",
            url:     "/supplier_activities/price_check",
            data:    { quantityValue },
            success: function(post){ console.log('success') },
            error:   function(post){ console.log(this) }
          });
    }
};

The partial html is simply <% @price %>

The controller code is :

def price_check
    @option = params[:optionValue]
    @number = params[:quantityValue]
    if !@option.blank? && !@number.blank? 
        @price = Price.find_by("supplier_activity_option_id = ? AND min_qty_for_price <= ? AND max_qty_for_price >= ?", params[:optionValue], params[:quantityValue], params[:quantityValue]).price_usd 
    else 
        @price = 100
    end 
    respond_to do |format|
            format.js {render layout: false} 
    end
end 

Answer 1

Found the solution - have passed through the value of both checked radio buttons on each click of any radio button. This means that whenever a radio button is clicked, the values of both checked buttons are passed in at the same time.

    <script> 

        function save_option() 
    {var optionValue = $('input[name = "carted_activity[supplier_activity_option_id]"]:checked').val();
    var quantityValue = $('input[name = "carted_activity[activity_quantity]"]:checked').val();
    if (optionValue) {
        $.ajax({
          type:    "POST",
          url:     "/supplier_activities/price_check",
          data:    { optionValue: optionValue, quantityValue: quantityValue },
          success: function(post){ console.log('success') },
          error:   function(post){ console.log(this) }
        });
    }
  };

  function save_quantity() 
    {var quantityValue = $('input[name = "carted_activity[activity_quantity]"]:checked').val();
    var optionValue = $('input[name = "carted_activity[supplier_activity_option_id]"]:checked').val();
    if (quantityValue) {
      $.ajax({
          type:    "POST",
          url:     "/supplier_activities/price_check",
          data:    { quantityValue: quantityValue, optionValue: optionValue },
          success: function(post){ console.log('success') },
          error:   function(post){ console.log(this) }
        });
    }
  };

    </script>