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 The W3C Markup Validation Service 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>