codegirl codegirl - 1 year ago 155
Ruby Question

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

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
if
and
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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download