CODEWITHSUNDEEP
javascriptruby-on-rails
user1765002
user1765002

Reputation: 37

Rails: Dynamically displaying a value inside a form

Still trying to solve this puzzle. I have a more complete example here. The model is called PanOrder.

Here's what I have in the /assets/javascripts/pan_orders.js:

function pans_total_cost ()
{
    var p;
    var individual_price;
    var n;
    var pans;
    p = document.getElementById("price_per_pan");
    individual_price = p.value;
    n = document.getElementById("number_of_pans");
    pans = n.value;
    if (pans > 0)
    {
        document.getElementById.html("pans_total").value = n * p;
    }
}

...and here's what I have in my /views/pan_orders/_form.html.erb

<%= form_for(@pan_order) do |f| %>
  <% if @pan_order.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@pan_order.errors.count, "error") %> prohibited this pan_order from being saved:</h2>

      <ul>
      <% @pan_order.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <%= f.hidden_field :price_per_pan, :value => 300 %>
    <%= f.hidden_field :extra_shipping, :value => 25 %>
  <div class="field">
    <%= select_tag :number_of_pans, options_for_select(pans_array)%>
  </div>
  <h3>Subtotal: <span id="pans_total"></span></h3>
  <div class="field">
    <%= check_box_tag :expedited_shipping, :checked => false, :onclick => "pans_total_cost()"  %>
    </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

... and here's what I have in my /helpers/pan_orders_helper.rb

module PanOrdersHelper
    def pans_array
      numbers = []
      zero = ["0", 0]
      one = ["1", 1]
      two = ["2", 2]
      three = ["3", 3]
      four = ["4", 4]
      five = ["5", 5]
      numbers << zero << one << two << three << four << five
    end
  end

But, when the form is displayed, and I select 1 or more pans from the dropdown list, and click on the checkbox, nothing appears after "subtotal".

Upvotes: 0

Views: 1113

Answers (1)

Nick B
Nick B

Reputation: 7689

Your DOM element with the ID of number_of_pans is a select tag, yet in JavaScript you are using ".value" to try to get the selected value, which will not work. Also your code to set the HTML of the <span id="pans_total"> won't work either. You have a typo of ".html" plus you can't set the HTML of a DOM element with ".value" either.

I highly recommend you using jQuery or some other JavaScript framework to help with manipulating the page dynamically.

Also you had a typo in the actual calculation where you multiply the two values. Wrong variable names were used.

// include jQuery in your <head>

function pans_total_cost ()
{
    var p;
    var individual_price;
    var n;
    var pans;
    p = $("#pan_order_price_per_pan");    // jQuery selector (updated)
    individual_price = p.val(); // this is the jQuery way to get an input's value
    n = $("#number_of_pans");
    pans = n.val(); // this works with select tags too
    if (pans > 0)
    {
        $("#pans_total").html(individual_price * pans); // jQuery way to set the HTML of an element
    }
}

Solution without jQuery:

function pans_total_cost ()
{
    var p;
    var individual_price;
    var n;
    var pans;
    p = document.getElementById("pan_order_price_per_pan"); // <-- updated ID name
    individual_price = p.value;
    n = document.getElementById("number_of_pans");
    pans = n.options[ n.options.selectedIndex ].value; // <-- updated line
    if (pans > 0)
    {
        document.getElementById("pans_total").innerHTML = individual_price * pans;  // <-- updated line, including variable names!
    }
}

Furthermore, you have a bug with your check_box_tag form helper call. You are missing two required fields, so your options are not being used as you expected. If you view the resulting HTML output, you don't have a onchange="pans_total_cost()" attribute, instead you had this:

false, :onchange=>"pans_total_cost()"}" name="expedited_shipping">

Fix it by setting the value and whether it's checked:

<%= check_box_tag "expedited_shipping", "yes", false, { :onchange => "pans_total_cost()" } %>

Upvotes: 1

Related Questions