Question

I have a checkbox which updates totals on a page based on whether it’s checked or unchecked. On one part of my form, I would like to zero out a Telerik Numeric TextBox (Text Input field) if the user decides they do not require that category.

When the above checkbox is unchecked, the value in the textbox on the right should change back to zero. To accomplish this, I’ve written the jQuery code below (note, this function is called whenever something changes on the form):

var zeroValue = getNum(0.00);

//Scaffolding
    if ($("#ScaffoldingRequired").attr('checked')) {
        scaffoldingCost = getNum($("#ScaffoldingCost").val());
        totalCost += scaffoldingCost;
    } else {
        $("#ScaffoldingCost").val(zeroValue);
        $("#ScaffoldingCost").text(zeroValue);
    }
//Round&Convert to 'decimal'
function getNum(num) {
        var number = parseFloat(num) || 0.00;
        var rNumber = Math.round(number * 100) / 100;
        return rNumber.toFixed(2) * 1;
    }

NOTE: To make sure everything rounds properly and doesn’t give me NaN’s, I’ve used my getNum function ( I understand it’s a bit hack ).

This code works, and all my totals calculate properly but the textbox does not display a zero value until the user actually clicks on the input box. I’ve displayed this below:

Is there something I can do to recycle my input box so it displays the zero value immediately? Or am I setting the value/text completely wrong?

Answer 1

You say you’re using Telerik, have you considered using their client API for changing the value of the textbox?

var textBox = $('#ScaffoldingCost').data('tTextBox');
textBox.value(0);