Removing cost when radio-button is selected, Ruby on rails

Question

I´m learning ruby on rails by creating a Ecommerce app.

My problem is how would I remove the delivery cost if the customer has either selected Pick up in store or the total amount is higher than $100?

So when the Pick up in store or when total amount is grater than $100 the delivery cost should be removed.

I've used if and else to get the desired result. But by using that the Total cost is not updating when the radio buttons are selected.

This is the code with out the ifand else

    <tr>
            <th><p>Products Total: </p></th>
            <th><p>Delivery Cost: </p></th>
            <th><p>Total Cost: </p></th>
    </tr>
    <tr>
      <td><p ><%= @cart.total_price_usd %></p></td>
      <td><p ><%= @del_cost_usd %> </p></td>
      <td><p ><%= @cart.total_price_usd + @del_cost_usd%></p></td>   
    </tr>

    <div>   
      <li><%= f.radio_button :pick_up, "1", checked: false, class: 'delivery-options', data: { question: "Pick up items in store" }  %> 
      <%= f.label :pick_up, "Pick up items in store" %></li>

     <li><%= f.radio_button :pick_up, "0",  checked: true, class: 'delivery-options' , data: { question: "Have items sent by mail" } %> 
     <%= f.label :pick_up, "Have items sent by mail", class: ''  %></li> 
    </div>

Can someone inform me on the results I want.

This is probably easy points for the one with the experience

TIA Codegirl

Someone will probably be able to answer directly. I'm not as fluent to give you a 'off the top of my head' answer but look up 'hiding elements using JavaScript'. I use it in some of my apps for the same purpose. — Scott Monceaux, Oct 02 '17 at 14:33

thanhnha1103 · Accepted Answer · 2017-10-02T15:08:51.777

2

I have a plan to solve that.

Give the DOMs you show label and value of Delivery Cost a class to toggle their display attribute:

<p class="delivery-cost-fields">Delivery Cost: </p>
<p class="delivery-cost-fields"><%= @del_cost_usd %> </p>

For your 'Pick up items in store' radio button, define it's 'onchange' like below:

<%= f.radio_button :pick_up, "1", checked: false, class: 'delivery-options', data: { question: "Pick up items in store" }, onchange: "$('.delivery-cost-fields').toggleClass('hidden', true)"  %>

For your 'Have items sent by mail' radio button, define it's 'onchange' like below:

<%= f.radio_button :pick_up, "0",  checked: true, class: 'delivery-options' , data: { question: "Have items sent by mail" }, onchange: "$('.delivery-cost-fields').toggleClass('hidden', false)" %>

Define a hidden css class:

.hidden {display: none;}

Hope this help.

edited Oct 02 '17 at 15:08

answered Oct 02 '17 at 14:32

thanhnha1103

1,037
1
8
18

I like this. I'm curious to see if it works. Nice and low key. – Scott Monceaux Oct 02 '17 at 14:35
@Nhã Huỳnh, This is working except for the line `
<%= @del_cost_usd %>
` the `id="delivery-cost"` doesn't seem to have any affect on this line. Why is that? and what do I have to do to make it disappear? – codegirl Oct 02 '17 at 15:03
@codegirl I just fixed my answer. We should toggle the display attribute of both the description p tag and the value p tag of the Delivery Cost. Prev I just make the description tag disappear. :D – thanhnha1103 Oct 02 '17 at 15:11
@Nhã Huỳnh, thank you, Both fields are disappearing now. But the delivery cost is still adding to the `total cost` as in this line `
<%= @cart.total_price_usd + @del_cost_usd%>
` is it possible to make it not add the `total_price_usd` to `del_cost_usd` when the pick up in store is selected? – codegirl Oct 02 '17 at 15:18
I think it can be solved from your backend, or you should use something like local calculating or ajax to solve this one. :D – thanhnha1103 Oct 02 '17 at 15:24
@Nhã Huỳnh, well I guess I have to take a deep look into that since I have so little experience on the backend stuff :) – codegirl Oct 02 '17 at 16:02

Removing cost when radio-button is selected, Ruby on rails

1 Answers1