You are viewing limited content. For full access, please sign in.

Question

Question

How to update a field from a hidden field that is only used to store the total of a calculation?

Laserfiche Forms Version 9
Updated September 17, 2015
asked on April 3, 2015

I have a hidden field called "total" that is used to store a calculation from a "sum" class.

I am having difficulty hiding another field when "total" equals 100. When I use the change event, it does not hide the field when the total does equal 100. 

How would I go around this with JavaScript? 

0 0

Answer

APPROVED ANSWER
replied on April 3, 2015

What if you try and trigger a change event after you store the calculated sum into the "total" field?

Another option might be to just use an if/else statement to hide/show the other field based on what the sum is. See this example using the sample javascript from the Forms help file for calculating a sum with a few additional lines added.

$(document).ready(function () {
    $(document).on('blur change', '.sum input', sumtotal);
    $('#q3').hide();
  
    function sumtotal() {
        var s = 0;
        $('.sum input').each(function () {
            s += parseNumber($(this).val());
        });
        $('.total input').val(s);
      if (s == 100) {
        $('#q4').hide();
      } else {
        $('#q4').show();
      }
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
});

The fields you want to sum together will use the "sum" class and the field that will store the total (and always be hidden) is q3 and has the "total" class. There is a fourth field with id q4 that will be hidden or shown depending on whether the sum equals 100 or not.

1 0

Replies

replied on April 3, 2015 • Show version history

The best way would be to edit it at time of calculation. If you're using the javascript to do a sum based on the laserfiche help page here then adjust it to be:

$(document).ready(function () {
$('.sum').on('blur', 'input', sumtotal);
function sumtotal() {
var s = 0;
$('.sum input').each(function () {
s += parseNumber($(this).val());
});
$('.total input').val(s);
if (s==100) {
$('#q10').hide();
} else {
$('#q10').show();
}
}
function parseNumber(n) {
var f = parseFloat(n); //Convert to float number.
return isNaN(f) ? 0 : f; //treat invalid input as 0;
}
});

Change #q10 to whatever element you want to be hiding or showing based on that total equaling 100.

Cheers,

Carl

replied on September 10, 2015

The problem here is that apparently the condition checking code in LF Forms only gets called by the Forms each time a keystroke is made in the field on the form.  So if you never actually click in the field and type a value, then the code that checks the value of the data entered, never gets called. 

So if you write code in Javascript that updates a value of a 'total' field, and you are trying to trigger a field rule based on that value, it won't work because the user never clicked and made a keystroke in the total field.  There has to be a way to accomplish this, I could REALLY use some help.

0 0
View 3 previous replies
replied on September 11, 2015

The above JS sample includes code to show or hide a field based on the value that gets set in the "total" field. It's not using the built in field rule functionality in Forms.

0 0
replied on September 11, 2015

Below is my JavaScript that is currently being used to generate my total.  I'm no Java programmer so I have a hard time following the syntax changes that I would need to make to implement this suggestion in my code.  Could you please have a look and let me know what to do?

$(document).ready(function() {

     $('.cf-table-block').on('blur','input',sumtotal);

     function sumtotal() {

       var quantity = 0;
       var cost = 0;
       var total = 0;
       var subtotal =0;
      

       $('.cf-table-block tbody tr').each(function (){
         quantity = parseNumber($(this).find('.quantity input').val())
         cost = parseNumber ($(this).find('.cost input').val());
         subtotal = (quantity * cost);
         $(this).find('.subtotal input').val(subtotal);
         total += subtotal; 
         
    });
       $('.total input').val((total).toFixed(2));

  }

  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 11, 2015

After you set the total value into the .total input field, just put in a check to show or hide the relevant field(s) based on what the total is. In the previous example, you see we set the value, s, into the .total input field. Then after that, we check if s equals 100, then hide some field, else show the field.

0 0
replied on September 11, 2015

So when does the JavaScript part of the form get executed?  Is it only on form load? Or does it get executed each time a field changes or what?

0 0
replied on September 11, 2015

The code goes inside your sumtotal function. That function is called on every blur event that occurs in an input field in the table that's in your form.

0 0
replied on September 17, 2015

Thank you for taking the time to explain further Alex.  I now have a line inside of the Javascript that hides the field on form load, then as each blur event happens on the table, the value of total is checked, and either shows the hidden field or does nothing.  This is exactly the behavior I wanted.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...