Question

Check Box Event: Multiply a check box value with a floating point number entered in an outside field

Forms

Updated September 4, 2014

asked on September 1, 2014

The check box is associated with a decimal value of 0.80. When the user "checks" the check box, I would like to take 0.80 and multiply it with a floating point number that is entered in Field 1. The result will then be stored in Field 2 upon the "checking" of the check box. If the check box is not "checked", I want Field 2 to be hidden.

For some unknown reason, my code doesn't multiply the two values together after the check box checked. Can anyone help?

0 0

Answers

APPROVED ANSWER

replied on September 3, 2014

This should do the trick:

$(document).ready(function () {
    $('.pd100, .chk80').on('blur change', 'input', computePD80);

    function computePD80() {
        if ($('.chk80 input').is(':checked')) {
            var pd100 = parseNumber($('.pd100 input').val());
            var chk80 = $('.chk80 input:checked').val().replace(/V_/g, '');
            $('.pd80 input').val(chk80 * pd100);
        } else {
            $('.pd80 input').val('null');
        }
    }

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

0 0

SELECTED ANSWER

replied on September 3, 2014 • Show version history

Try this:

$(document).ready(function () {
    $('.pd80, .pd100').on('blur', 'input', computePD80);  

    function computePD80() {
        alert('test begin');
        if ($('.chk80 input').is(':checked')) {
            alert('true');
            var pd100 = parseNumber($('.pd100 input').val());
            var chk80 = $('.chk80 input').val().replace(/V_/g,'');   
            $('.pd80 input').val(chk80 * pd100);
        } else {
          alert('false');
            $('.pd80 input').val('null');
        }
      alert('end');
    }

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

You will notice that it prompts you on the screen when the function runs, is evaluated, and ends. This helped me identify that you needed to use '.is(':checked')' for the checkbox. You can use the double forward slash to comment out those alerts or just simply remove them after you test everything.

I feel like you may want to add in a line to get the change to happen when the checkbox is marked as well, you can add in this line to the top to add that:

$('.chk80').on('change','input',computePD80);

Or, change the second line to appear like this:

$('.pd80, .pd100, .chk80').on('blur', 'input', computePD80);

EDIT: Also, Eric's post included 'parseNummber' instead of the mentioned function 'parseNumber' which may have added to the items not running properly

0 1

Replies

replied on September 2, 2014

Could you post a snippet of your code so we can have a better idea?

0 0

replied on September 2, 2014

Are you saying it runs once but not twice? It sounds like the wrong event is being handled. Can you post the code and a screenshot of the fields to help us get a better idea of what is going wrong?

0 0

replied on September 2, 2014

Attached are the images of the CSS_JS form field, and the check box properties, and the Java Script. Here is the scenario, if the check box is "checked," I'd like to do a simply multiplication calculation between the "input value" of field 1 and the check box value; their product will be stored as the "input value" of field 2. If the check box is not checked, the "input value" of field 2 should be set to "null."

CSS_JS.PNG (5.97 KB)

| Download

CheckBox.PNG (4.39 KB)

| Download

JS.txt (425 B)

| Download

0 0

View 1 previous reply

replied on September 2, 2014 • Show version history

It looks like you're calling the parseNumber function without defining it. Your if statement was also missing a pair of parenthesis. See if this does the trick.

$(document).ready(function () {
    $('.pd80, .pd100').on('blur', 'input', computePD80);  

    function computePD80() {
    
        if ($(".chk80 input:checked")) {
            var pd100 = parseNumber($('.pd100 input').val());
            var chk80 = $('.chk80 input').val().replace(/V_/g,'');   
            $('.pd80 input').val(chk80 * pd100);
        } else {
            $('.pd80 input').val('null');
        }
    }

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

Update: Removed typo.

0 0

replied on September 3, 2014

Hey Eric,

The code did not run at all. The multiplication calculation did not compute after the check box was "checked." Seems to me that the code within the "if" statement doesn't run whenever I invoke the field input $('.pd100 input') under the condition ($(".chk80 input:checked")). Consequently, the multiplication calculation does not compute. Any thoughts?

0 0

SELECTED ANSWER

replied on September 3, 2014 • Show version history

Try this:

$(document).ready(function () {
    $('.pd80, .pd100').on('blur', 'input', computePD80);  

    function computePD80() {
        alert('test begin');
        if ($('.chk80 input').is(':checked')) {
            alert('true');
            var pd100 = parseNumber($('.pd100 input').val());
            var chk80 = $('.chk80 input').val().replace(/V_/g,'');   
            $('.pd80 input').val(chk80 * pd100);
        } else {
          alert('false');
            $('.pd80 input').val('null');
        }
      alert('end');
    }

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

I feel like you may want to add in a line to get the change to happen when the checkbox is marked as well, you can add in this line to the top to add that:

$('.chk80').on('change','input',computePD80);

Or, change the second line to appear like this:

$('.pd80, .pd100, .chk80').on('blur', 'input', computePD80);

EDIT: Also, Eric's post included 'parseNummber' instead of the mentioned function 'parseNumber' which may have added to the items not running properly

0 1

APPROVED ANSWER

replied on September 3, 2014

This should do the trick:

$(document).ready(function () {
    $('.pd100, .chk80').on('blur change', 'input', computePD80);

    function computePD80() {
        if ($('.chk80 input').is(':checked')) {
            var pd100 = parseNumber($('.pd100 input').val());
            var chk80 = $('.chk80 input:checked').val().replace(/V_/g, '');
            $('.pd80 input').val(chk80 * pd100);
        } else {
            $('.pd80 input').val('null');
        }
    }

    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 4, 2014

Hi Tony,

If your question has been answered, please let us know by clicking the "This answered my question" button on the appropriate response.

If you still need assistance with this matter, just update this thread. Thanks!

0 0

replied on September 4, 2014

Hi Kenneth and Eric,

The code worked as desired, thank you for your help and input!

Tony

0 0

You are not allowed to follow up in this post.

Question

Question

Check Box Event: Multiply a check box value with a floating point number entered in an outside field

Answers

Replies

Sign in to reply to this post.