AppNitro MachForm Custom JS

Target elements within individual forms by checking for the form's ID first, then executing custom code second.

HTML

<form id='form_10942'>
    <input id="element_75" value="00.00" onfocus="if(this.value == '00.00') { this.value = ''; }">
    <br>
    <input id="element_76" value="00.00" onfocus="if(this.value == '00.00') { this.value = ''; }">
    <br>
    <input id="element_77" value="00.00" onfocus="if(this.value == '00.00') { this.value = ''; }">
    <br>
    <input id="element_78" value="00.00" onfocus="if(this.value == '00.00') { this.value = ''; }">
    <br>
    <input id="element_79" value="00.00" onfocus="if(this.value == '00.00') { this.value = ''; }">
    <br>
    <input id="element_80" value="00.00" onfocus="if(this.value == '00.00') { this.value = ''; }">
    <br>
    <input type="text" id="element_81" value="00.00">
    <br>
</form>

CSS

input:disabled {
    background: #EEE;
}
body {
    padding:10px;
    margin:25px 0 0 25px;
}
input {
    padding:5px;
    margin: 5px 0;
}

JavaScript

$(document).ready(function () {

    var one, two, three, four, five, six, total;
    // JavaScript for form_10942
    if ($('#form_10942').length) {
        // Disable input field to display total
        $('#element_81').prop('disabled', true);
        // Add elements to display total as 2 decimal float
        $(document).change(function () {
            one = $('#element_75').val();
            two = $('#element_76').val();
            three = $('#element_77').val();
            four = $('#element_78').val();
            five = $('#element_79').val();
            six = $('#element_80').val();
            total = parseFloat(one) + parseFloat(two) + parseFloat(three) + parseFloat(four) + parseFloat(five) + parseFloat(six);
            $('#element_81').val("$" + parseFloat(total).toFixed(2));
        });
    }
    // JavaScript for form_10943
    if ($('#form_10943').length) {
        // Do something for next form
    }
});