I am trying to set up a donations page for people to give money to a non-profit and allow them to specify the uses of the money. I have it set up that it totals the amounts the giver puts in each field as they enter amounts. I am trying to add an input mask in each field, but it is just making my JavaScript crash and not do anything. Here is the code I currently have that works perfectly before any masks:
<script src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
var calcTot = function() {
var sum = 0;
$('.toTotal').each( function(){
sum += Number( $(this).val() );
});
$('#giveTotal').val( '$' + sum.toFixed(2) );
}
calcTot();
$('.toTotal').change( function(){
calcTot();
});
});
</script>
'toTotal' is the class name given to all the input boxes that need to be added up; that is also the class that needs a mask. 'giveTotal' is the id of the total field.
I have tried several variations I have found on StackOverflow and other sites.
Full Code:
<html>
<head>
<script src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
//This is one of the masking codes I attempted.
$('.toTotal').mask('9.99', {reverse: true});
//other options I have tried:
//$('.toTotal').mask('9.99');
//$('.toTotal').mask('0.00');
//$('.toTotal').inputmask('9.99');
//$('.toTotal').inputmask('mask', {'mask': '9.99'});
var calcTot = function() {
var sum = 0;
$('.toTotal').each( function(){
sum += Number( $(this).val() );
});
$('#giveTotal').val( '$' + sum.toFixed(2) );
}
calcTot();
$('.toTotal').change( function(){
calcTot();
});
//I have tried putting it here, too
});
</script>
<title>Addition</title>
</head>
<body>
<input type="text" class="toTotal"><br />
<input type="text" class="toTotal"><br />
<input type="text" class="toTotal"><br />
<input type="text" id="giveTotal">
</body>
</html>
$('.toTotal').mask('000,000.00', {reverse: true});. I also tried variations I found that used.inputmask, with and without{reverse: true}, and 9s instead of 0s. I don't know if placement might have been an issue as well. My first option was to put this code on the line beforevar calcTot = function() {. I also tryied it at the end of ready function and in the middle of it. – Tugboat