Calculate Percentage using jquery

Hello,

I want to calculate percentage marks of students using jquery, for this
I tried the below code but its not working. I am very beginner in ruby
on rails.

<div class="label-field-pair">
        <label><%= t('obtained_marks') %></label>
        <div class="text-input-bg"><%= a.text_field :ob_marks, :id =>
"ob_marks" %></div>
        <div class="extender"></div>
      </div>
      <div class="label-field-pair">
        <label><%= t('total_mark') %></label>
        <div class="text-input-bg"><%= a.text_field :total_mark, :id =>
"total_mark" %></div>
        <div class="extender"></div>
      </div>
    <div class="label-field-pair">
        <label><%= t('percentage_marks') %></label>
        <div class="text-input-bg"><%= a.text_field :percentage, :id =>
"percentage" %></div>
        <div class="extender"></div>
      </div>

<script type="text/javascript">
  $(function() {
    $("#total_mark, #ob_marks").keyup(function() {
        var t = $("#total_mark").val();
        var o = $("#ob_marks").val();
        $("#percentage").val(o * 100 / t);
    })
});
  </script>

A simple way to debug your code is to use the javascript alert
function to display values as they are calculated so, for example, at
the start of the function you could insert
alert("In function");
then after the line var t = ...
alert(t)
to check that the value of t is being calculated correctly. Then you
can work out where it is going wrong. Also, in firefox, open the
console window (Tools > Web Developer > Web Console) and reload the
page and it will tell you if there are any errors in the javascript.

Colin

The alert is not working too. and showing no error, looks that the
script is not running at all.

Please quote the previous message when replying, this is a mailing
list not a forum (though you may be accessing it via a forum like
interface). It is easier to follow the thread if you quote the
previous message and insert your reply at appropriate point(s) in the
message. Thanks.

Have a look at the html source (Tools > Web Developer > Page Source)
and check the the fields have the correct id. If that looks ok then
copy the complete page source and paste it into the html validator at
https://validator.w3.org/#validate_by_input to check that it is valid.

Colin

Checked with validator and it showed no error in this script.

The alert is not working too. and showing no error, looks that the
script is not running at all.

below is the complete code.

<div id="content-header">
  <%= show_header_icon %>
  <h1><%= t('admission') %></h1>
  <div class='header-sep'>|</div>
  <div class='sub-header'><%= t('previous_details') %></div>

</div>
<div id="page-yield">
  <div class="bread_crumb">
    <% breadcrumb :student_previous_data, @student %>
    <%= render_breadcrumbs %>
  </div>
  <script>
  $(function() {
    $("#total_mark").keyup(function() {
  alert("key pressed");
        var t = $("#total_mark").val();
        var o = $("#ob_marks").val();
        $("#percentage").val(o * 100 / t);
    })
});
  </script>

  <% unless flash[:notice].nil? %>
    <p class="flash-msg"> <%= flash[:notice] %> </p>
  <% end %>
  <%= error_messages_for 'previous_data' %>

  <% form_for :student_previous_details do |a| %>
  <%#= error_messages_for 'employee_bank_details' %>

    <span class="span-sub-heading"><%= t('previous_educational_details')
%></span>
    <hr class="sub-heading"></hr>
    <div id="form-contents">
      <%= a.hidden_field :student_id, :value => @student.id %>
      <div class="label-field-pair">
        <label><%= t('institution_name') %></label>
        <div class="text-input-bg"><%= a.text_field :institution
%></div>
        <div class="extender"></div>
      </div>
    <div class="label-field-pair">
        <label><%= t('board_name') %></label>
        <div class="text-input-bg"><%= a.text_field :board_name %></div>
        <div class="extender"></div>
      </div>
    <div class="label-field-pair">
        <label><%= t('board_roll_num') %></label>
        <div class="text-input-bg"><%= a.text_field :board_roll_num
%></div>
        <div class="extender"></div>
      </div>
      <div class="label-field-pair">
        <label><%= t('course_text') %></label>
        <div class="text-input-bg"><%= a.text_field :course %></div>
        <div class="extender"></div>
      </div>
    <div class="label-field-pair">
        <label><%= t('group_name') %></label>
        <div class="text-input-bg"><%= a.text_field :group_name %></div>
        <div class="extender"></div>
      </div>
      <div class="label-field-pair">
        <label><%= t('year') %></label>
        <div class="text-input-bg"><%= a.text_field :year %></div>
        <div class="extender"></div>
      </div>
    <div class="label-field-pair">
        <label><%= t('obtained_marks') %></label>
        <div class="text-input-bg"><%= a.text_field :ob_marks, :id =>
"ob_marks" %></div>
        <div class="extender"></div>
      </div>
      <div class="label-field-pair">
        <label><%= t('total_mark') %></label>
        <div class="text-input-bg"><%= a.text_field :total_mark, :id =>
"total_mark" %></div>
        <div class="extender"></div>
    <div class="label-field-pair">
        <label><%= t('percentage_marks') %></label>
        <div class="text-input-bg"><%= a.text_field :percentage, :id =>
"percentage" %></div>
        <div class="extender"></div>
      </div>
     <div class="label-field-pair">
          <label for="student_blood_group"><%= t('exam') %></label>
          <div class="text-input-bg"><%= select :student_previous_datas,
:exam, ["Annual", "Supply"] %></div>
        </div>

    <div class="extender"></div>
      </div>
      <div class="save-proceed-button">
        <%= link_to "► #{t('skip')}", {:controller => "student", :action
=> "admission4", :id => @student.id },:class=>'user_button' %>

        <%= submit_tag "► #{t('save_and_proceed')}", :disable_with => "►
#{t('please_wait')}" %>

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

  <div class="ajax-subject">
    <ul id="added-subjects">
      <% unless @previous_subject.nil? %>
        <% @previous_subject.each do |p| %>

          <li><div class="name"><%= p.subject %></div>
            <div class="themed_text val"><span>:</span><%= p.mark
%></div>
            <div class="delete"><%= link_to_remote
image_tag("/images/buttons/delete-new.png", :border => 0),
                :url => {:action => "delete_previous_subject", :id =>
p.id},
                :loading=>"$('loader').show();"
,:loaded=>"$('loader').hide();",

                :update => "added_subjects"%></div>
          </li>

        <% end %>
      <% end %>
    </ul>
    <%= link_to_remote "#{t('add_subject')}",
:url=>{:controller=>"student",:action=>"previous_subject",
:id=>@student.id},:loading=>"$('loader').show();"
,:loaded=>"$('loader').hide();"%>
    <%= image_tag("loader.gif", :align => "absmiddle", :border => 0, :id
=> "loader", :style =>"display: none;" ) %>
    <div id="subject">

    </div>
  </div>
</div>

[snipped the erb source code]

Please read my message again (if you had quoted the bit you were
replying to you would have seen this is not all that I asked for, I
also asked:

Have a look at the html source (Tools > Web Developer > Page Source)
and check the the fields have the correct id.

Also maybe a good idea to copy/paste the relevant section here.

Looking at the code I see that you have put the javascript inside a
div which is a bit unusual, but I don't think it matters. Difficult
to see why you have put it there though.

Colin

Colin Law wrote in post #1181132:

Checked with validator and it showed no error in this script.

The alert is not working too. and showing no error, looks that the
script is not running at all.

below is the complete code.

[snipped the erb source code]

Please read my message again (if you had quoted the bit you were
replying to you would have seen this is not all that I asked for, I
also asked:

Have a look at the html source (Tools > Web Developer > Page Source)
and check the the fields have the correct id.

Also maybe a good idea to copy/paste the relevant section here.

Looking at the code I see that you have put the javascript inside a
div which is a bit unusual, but I don't think it matters. Difficult
to see why you have put it there though.

Colin

Replacing $ with jQuery worked for me,

<script>
  jQuery(function() {
    jQuery("#total_mark").keyup(function() {
  alert("key pressed");
        var t = jQuery("#total_mark").val();
        var o = jQuery("#ob_marks").val();
        jQuery("#percentage").val(o * 100 / t);
    })
});
  </script>