Question

Compare values in radio button and use result to assign value to javascript variable

Updated September 8, 2014

asked on September 8, 2014

I have a table that is used to track time and need to take the difference of the end time and the start time. There are two fields for am/pm that are radio buttons and I need to compare them and if they don't match add 12 hours to the end time in the formula in my java script. I have not been able to do this successfully and will be grateful for any suggestions on how I can accomplish this.

0 0

Answer

SELECTED ANSWER

replied on September 8, 2014 • Show version history

$(document).ready(function () {
    $('.cf-table-block').on('blur', 'input', sumtotal);
    function sumtotal() {
        var total1 = 0;
 var total2 = 0;
   var total3 = 0;
  $('.cf-table-block tbody tr').each(function () {
            var s = 0;
   var timeS = 0;
   var timeE = 0;
            $(this).find('.timeSTART input').each(function () {
                timeS = parseNumber($(this).val());
            });
            $(this).find('.timeEND input').each(function () {
                timeE = parseNumber($(this).val());
            });
   s = timeE - timeS;
   if ($(this).find('.timeSTARTTOD input:checked').val() != $(this).find('.timeENDTOD input:checked').val()) {
      s += 12;
   }
   $(this).find('.subtotal input').val(s);
   
   if ($(this).find('.timeTYPE option:selected').val() === "Type1"){
    total1 += s;
    }
   else if ($(this).find('.timeTYPE option:selected').val() === "Type2"){
    total2 += s;
    }
   else if ($(this).find('.timeTYPE option:selected').val() === "Type3"){
    total3 += s;
    }

    $('.totalTYPE1 input').val(total1);
    $('.totalTYPE2 input').val(total2);
    $('.totalTYPE3 input').val(total3);

   });
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
});

The above should do the trick

The reason what you said you were trying did not work is because you need to use the single quotes and a period before the CSS Class reference name to get that to return a value. You also were referencing the field like it was a dropdown and not a radio input field

Please make sure to enable values for the fields, and make sure each option (AM or PM) is consistent between the two. So if I pick AM on both, they both should have a value of AM. If I select PM on either, it should have a value of PM. This way the code can evaluate if they values are different. (Might not be needed to set a value for the dropdown options, but that's what I did when testing)

1 0

Replies

replied on September 8, 2014

Can you please post a screenshot of that field from the preview panel in the CSS / Javascript edit page. I should be able to help from there.

Also, it may be helpful if you post the code you already have.

0 0

replied on September 8, 2014

Here is a screen shot of the form with the class identifiers and script. The class for the radio buttons is difficult to read but they are timeSTARTTOD and timeENDTOD

$(document).ready(function () {
    $('.cf-table-block').on('blur', 'input', sumtotal);
    function sumtotal() {
        var total1 = 0;
 var total2 = 0;
   var total3 = 0;
  $('.cf-table-block tbody tr').each(function () {
            var s = 0;
   var timeS = 0;
   var timeE = 0;
            $(this).find('.timeSTART input').each(function () {
                timeS = parseNumber($(this).val());
            });
            $(this).find('.timeEND input').each(function () {
                timeE = parseNumber($(this).val());
            });
   s = timeE - timeS;
            $(this).find('.subtotal input').val(s);
   if ($(this).find('.timeTYPE option:selected').val() === "Type1"){
    total1 += s;
    }
   else if ($(this).find('.timeTYPE option:selected').val() === "Type2"){
    total2 += s;
    }
   else if ($(this).find('.timeTYPE option:selected').val() === "Type3"){
    total3 += s;
    }

    $('.totalTYPE1 input').val(total1);
    $('.totalTYPE2 input').val(total2);
    $('.totalTYPE3 input').val(total3);

   });
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
});

0 0

replied on September 8, 2014

I put this together to show you how to do it:

$(function() {
  function calculateTime () {
    var totalTimeHr = 0;
    if ($('.AMPM1 input:checked').val() != $('.AMPM2 input:checked').val() ) {
      totalTimeHr +=12;
    }
    
    alert(totalTimeHr);
  }
  $('.AMPM1').on('change','input',calculateTime);
  $('.AMPM2').on('change','input',calculateTime);
});

Using these fields:

$(function() {
  function calculateTime () {
    var totalTimeHr = 0;
    if ($('.AMPM1 input:checked').val() != $('.AMPM2 input:checked').val() ) {
      totalTimeHr +=12;
    }
    
    alert(totalTimeHr);
  }
  $('.AMPM1').on('change','input',calculateTime);
  $('.AMPM2').on('change','input',calculateTime);
});

0 0

replied on September 8, 2014

I think my main issues is I am not calling for the value properly for a radio button and i'm not 100% what to expect for the output when I do. I have been using

$(this).find(timeSTARTTOD option:selected).val()

but this is a complete guess mainly based off dropdown.

0 0

You are not allowed to follow up in this post.

Question

Question

Compare values in radio button and use result to assign value to javascript variable

Answer

Replies

Sign in to reply to this post.