RoR: pass selected value from radio button to Ajax partial

问题内容:

I’m a Rails & JS newbie and I am building an e-commerce app where the price is based on the product option selected and the quantity selected (there are bulk discounts). The customer gets to select their option and quantity via radio buttons on a form, and I would like them to be able to see the price they will need to pay before the form is submitted – i.e. on click of the radio buttons.

Currently the script for rendering the partial when the radio button is clicked works, BUT it does not manage to pass through the option.id selected and the quantity selected – both variables which are required to calculate the price. How do I record the value of the selected radio button and pass that through to the partial please? I.e. the values of the selected radio buttons need to be saved as @option variable and @quantity variable onclick before the whole form is submitted.

I have searched all afternoon on SO and on google and can’t find an answer, and would appreciate any guidance at all. I know my script code doesn’t work but I don’t quite know why it doesn’t work.

My form html code is shown below – the script for recording the @option & @quantity variable on click is not working:

<div class = "row booking_form">
<div class = "col-12">
<center><h4> Add to Cart </h4></center>
    <hr>
    <%= form_for @cartedactivity, url: carted_activities_path, method: :post, remote: true do |f| %>
            <% if @options.count > 1 %> 
                <h5>
                    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 %>
                                        <%= f.label :supplier_activity_option_id, option.option_name, :value => option.id %>
                                    </div>
                                <% end %> 
                            </center>
                        </div>
                </h5>
            <% else %>
                <%= f.hidden_field :supplier_activity_option_id, :value => @option.id %> 
            <% end %>

            <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 => "render_partial();" %>
                                        <%= 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 () {
        $('option_radio').on('change', 'input[type = radio]', function() {
        @option = $('input[name="supplier_activity_option_id"]:checked').val();
    })
    };
    function () {
        $('quantity_radio').on('change', 'input[type = radio]', function() {
        @quantity = $('input[name="activity_quantity"]:checked').val();
    })
    };

    function render_partial() {
      $('#check-price-<%=@option%>').html('<%= j render 'supplier_activities/price_2', @option =>option %>')
    };
</script>

The partial html is show here:

<div>
    <p>
        Price for <%=@quantity%> person(s):
        <%=number_to_currency Price.find_by("supplier_activity_option_id = ? AND min_qty_for_price <= ? AND max_qty_for_price >= ?", @option, @quantity, @quantity).price_usd %> each
    </p>
</div>

My controller code is here (but I’m guessing it shouldn’t impact on the saving of the variable as that should be done via the script?):

def show
    @supplieractivity = SupplierActivity.find(params[:id])
    @supplier = Supplier.find(@supplieractivity.supplier_id)
    @latestreviews = Review.where(supplier_activity_id: @supplieractivity).limit(3).order('id desc')
    @numbers = [1,2,3,4,5,6]
    @options = SupplierActivityOption.where(supplier_activity_id: @supplieractivity)
    @otherreviews = Review.where(supplier_activity_id: @supplieractivity).all[0..-4]
    @all_supplier_activities = @supplier.supplier_activities
    @allactivities = Activity.where(id: @supplier.supplier_activities.pluck(:activity_id))
    @cartedactivity = CartedActivity.new
end 

问题评论:

原文地址:

https://stackoverflow.com/questions/47751058/ror-pass-selected-value-from-radio-button-to-ajax-partial

添加评论

友情链接:蝴蝶教程