Formatting calculated field results on one line

  • Resolved scShaw

    (@istudiodesign)


    6 years, 5 months ago

    I want to display the results in another field, using the calculated field as auxiliary.

    I’ve inserted an “HTML Content” field in the form, with a DIV tag as its content:
    <div class=“result-here”></div>

    The equation I used is as follows:

    (function(){
    var result = fieldname1+fieldname2;
    jQuery(‘.result-here’).html(result);
    return result;
    })()

    and have ticked the checkbox “Hide the field from the public form” in the properties of calculated field.

    When defining the new style class through the “Customize Form Design” attribute in the “Form Settings” tab I used:

    #fbuilder .result-here{font-size: 18px !important;}

    However, I also want the text “Total = $” on the same line, but whenever I try adding the text, it ends up on two lines:

    Total = $
    2350.00

    How do I get it on one line so it looks like this (also with comma for thousands)

    Total = $2,350.00

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @istudiodesign,

    The currency format is applied to the equations results not as part of the equation but when the value is assigned to the field. So, I recommend you edit your project as follows:

    – First, edit the equation as follows:

    
fieldname1+fieldname2;

    Configure the calculated field to use the $ symbol as the prefix attribute and the comma symbol as the separator for thousands

    – Second edit the code into the HTML content field as follows: (I’m assuming here the calculated field is the fieldname3, you should use the corresponding one to your form)

    
<div class="result-here"></div>
<script>jQuery(document).on('change', '[id*="fieldname3_"]', function(){
jQuery('.result-here').html(this.value);
});</script>

    and that’s all.

    Please, for other questions indicate the URL to the webpage where the form is inserted.

    Best regards.

    Thread Starter scShaw

    (@istudiodesign)

    That does work.

    And where do the words Total: fit into the process?

    Plugin Author codepeople

    (@codepeople)

    Hello @istudiodesign,

    You simply should edit the div tag:

    <div class="result-here"></div>

    as follows:

    <div>Total = <spam class="result-here"></spam></div>

    In this case the javascript code will replace only the text into the spam tag.

    Best regards.

    Thread Starter scShaw

    (@istudiodesign)

    Thank you…really appreciate all your help in this.

    Just to be certain…is that SPAM CLASS or SPAN CLASS?

    Plugin Author codepeople

    (@codepeople)

    Hello @istudiodesign,

    I’m sorry, span tags.

    Best regards.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Formatting calculated field results on one line’ is closed to new replies.

Tags