Topic Closed
hoghoj1
176 Posts

Hi,

does anybody know, if it's possible to include simple financial functions such as Addition, Subtraction etc. into a textfield in Freemailform Enhanced?

Example: I would like to make a form with 3 fields to put expenses in (for entering ex. 550,-), and another field calculating the sum of these three.

hoghoj1

3 years ago#9774

juergen
1.4K Posts
51.6K Downloads
16 Plugins
design, web development & visual effects

It depends a bit on what you want to achieve.

Basically, with a few Javascript/jQuery lines you can do almost any caluculations on any form elements.
With JS only you can keep it completely independent from the FreeMailForm Plugin. So, if client side calc is sufficient, I'd go this route:

Create a folder in /addons such as /addons/FormCalc

Place a file Addon.ini there which contains…

Addon_Name = 'HogHoj1 Form Calc'
Addon_Version = 1
min_gpeasy_version = 3.5
About = 'HogHoj1’s simple form calculations.'

[GetHead]
script = FormCalc.php
method = FormCalc::GetHead

Create the file FormCalc.php which contains…

<?php
defined('is_running') or die('Not an entry point...');

class FormCalc {

  static function GetHead() {
    global $page;
    $page->jQueryCode .= '
      $(".summand-field").on("keyup change paste", function(){
        var sum = 0;
        $(".summand-field").each( function(){
          if( isNaN( parseFloat( $(this).val() ) ) ){
            $(this).css("outline", "1px solid red");
            return;
          }else{
            sum += parseFloat( $(this).val() );
            $(this).css("oultine", "none");
          }
        });
        $(".sum-field").val(sum);
      });
    ';
  }
}

Your plugin is ready. Goto Admin Toolbox -> plugins -> Manage -> Available -> HogHoj1 Form Calc -> Install

Edit the Source code of your FreeMailForm Enhanced section and add a class="summand-field" attribute to every summand input element.
Add the attributes class="sum-field" readonly="readonly" to the sum field.

This is a very basic implementation with only rudimentary field validation.
It adds all .summand-field values and puts the sum into all .sum-field inputs across form boundaries. So if there are several forms on one page, it would need a few lines more to work.
In case you also need server-side calculations, the FreeMailForm Enhanced plugin needs to be altered, which would be a bit more complex, depending on the goal.

Hope it works.
Watch your Javascript Console for errors (Chrome: Ctrl + Shift + J)

As always untested ;-)

Edited: 3 years ago#9776

hoghoj1
176 Posts

Hi Juergen,

sounds very interesting, but as I go throuh the lines you wrote, there may be an error here:

$(this).css("oultine", "none");

should it not be? : 

$(this).css("outline", "none");

Will I also be able to pick fields to calculate input from, as ex. field1, field2 etc.?

hoghoj1

3 years ago#9777

hoghoj1
176 Posts

Hi Juergen,

where can I find the source code of the Freemailform section to add the classes to?

Can I find this after having installed the plugin?

Unfortunately I have very little experience in programming myself, I'm rather more like a system man:-)

hoghoj1

3 years ago#9778

juergen
1.4K Posts
51.6K Downloads
16 Plugins
design, web development & visual effects

$(this).css("oultine", "none");

of course it should read outline ;)

where can I find the source code of the Freemailform section to add the classes to?

Sorry, I see that I wasn't clear about that.

The beauty of FreeMailForm / FMF Enhanced is that it comes with it's own section type. Contrary to other forms plugins, where single forms are built in the Admin backend, FreeMailForms are freely editable HTML content and you can have as many different forms as you like just by building them straight in CKEditor.

So, to come to the point, "source code" in our context is the HTML source of the FMF section, you can access using CKEditor's Source Dialog.
Hence, no, you don't need to edit the plugin's PHP or JS scripts.
 

 

Edited: 3 years ago#9779

juergen
1.4K Posts
51.6K Downloads
16 Plugins
design, web development & visual effects

Will I also be able to pick fields to calculate input from, as ex. field1, field2 etc.?

Sure. If you prefer to use the fields' name attributes, it's just a matter of the correct selectors used by the jQuery script:

To add values from, let's say the inputs named field1, field2 and field3 and put the sum into field4, the jQuery function woulld be…

 

<?php
defined('is_running') or die('Not an entry point...');

class FormCalc {

  static function GetHead() {
    global $page;
    $page->jQueryCode .= '
      $("input[name=\"field1\"], input[name=\"field2\"], input[name=\"field3\"]").on("keyup change paste", function(){
        var sum = 0;
        $("input[name=\"field1\"], input[name=\"field2\"], input[name=\"field3\"]").each( function(){
          if( isNaN( parseFloat( $(this).val() ) ) ){
            $(this).css("outline", "1px solid red");
            return;
          }else{
            sum += parseFloat( $(this).val() );
            $(this).css("oultine", "none");
          }
        });
        $("input[name=\"field4\"]").val(sum);
      });
    ';
  }
}

As you see, a single CSS class selector is just less code. And for simple calculations like additions, we don't need to target the fields individually.
If the formula was more complex, e.g. like sum = (field1 + field2) * (field3 / 100) where field3 could be a tax rate given in per cent, we would need to target and process each field specifically.

 

Edited: 3 years ago#9780

juergen
1.4K Posts
51.6K Downloads
16 Plugins
design, web development & visual effects

Um, and another one:

Will I also be able to pick fields to calculate input from, as ex. field1, field2 etc.?

No, if "pick" means to visually select the fields within the editing process and assign math to them.
It would be a quite difficult task to code a visual form calculator User Interface for arbitrary forms. We would have to use either some sort of mathematical formula language or to build kind of a spreadsheet from the form structure dynamically that would allow to enter formulas, similar to Excel. 

Of course, Wordpress has such a beast. It's roughly 750 kB of code and I'd estimate ~100 h of work at minimum to get a stable version.

3 years ago#9781

hoghoj1
176 Posts

Hi Juergen,

I have to contact you again, as I told you I'm a novice to programming, I simply don't know how to add a class even:-(

Hev tried my best, but it doesn't work.

I've added the addon, the first one, but when I edit the html, and it looks like this:

<form action="" class="freemailform" method="post">
<h3 style="text-align: center;">Bókaútgáva</h3>

<table>
    <tbody>
        <tr>
            <td class="left" style="text-align: right;"><span>Navn:</span></td>
            <td><input class="input text" name="name" size="70" type="text" /></td>
        </tr>
        <tr>
            <td class="left" style="text-align: right;">Gøta og nr.:</td>
            <td><input name="gota og nr" required="required" size="70" type="text" /></td>
        </tr>
        <tr>
            <td class="left" "summand-field">&nbsp;</td>
            <td><input name="tal1" type="text" /></td>
        </tr>
        <tr>
            <td class="left" "summand-field">&nbsp;</td>
            <td><input name="tal2" type="text" /></td>
        </tr>
        <tr>
            <td class="left" "sum-field" readonly="readonly">&nbsp;</td>
            <td><input name="sum" type="text" /></td>
        </tr>
        <tr>

Then I save it, and it looks like this:

<form action="" class="freemailform" method="post">
<h3 style="text-align: center;">Bókaútgáva</h3>

<table>
    <tbody>
        <tr>
            <td class="left" style="text-align: right;"><span>Navn:</span></td>
            <td><input class="input text" name="name" size="70" type="text" /></td>
        </tr>
        <tr>
            <td class="left" style="text-align: right;">Gøta og nr.:</td>
            <td><input name="gota og nr" required="required" size="70" type="text" /></td>
        </tr>
        <tr>
            <td class="left">&nbsp;</td>
            <td><input name="tal1" type="text" /></td>
        </tr>
        <tr>
            <td class="left">&nbsp;</td>
            <td><input name="tal2" type="text" /></td>
        </tr>
        <tr>
            <td class="left">&nbsp;</td>
            <td><input name="sum" type="text" /></td>
        </tr>
        <tr>
            <td class="left" style="text-align: right;">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>

all I wrote is gone ????

hoghoj1

3 years ago#9791

juergen
1.4K Posts
51.6K Downloads
16 Plugins
design, web development & visual effects

It's like this:

<form action="" class="freemailform" method="post">
<h3 style="text-align: center;">Bókaútgáva</h3>

<table>
    <tbody>
        <tr>
            <td class="left" style="text-align: right;"><span>Navn:</span></td>
            <td><input class="input text" name="name" size="70" type="text" /></td>
        </tr>
        <tr>
            <td class="left" style="text-align: right;">Gøta og nr.:</td>
            <td><input name="gota og nr" required="required" size="70" type="text" /></td>
        </tr>
        <tr>
            <td class="left">&nbsp;</td>
            <td><input class="summand-field" name="tal1" type="text" /></td>
        </tr>
        <tr>
            <td class="left">&nbsp;</td>
            <td><input class="summand-field" name="tal2" type="text" /></td>
        </tr>
        <tr>
            <td class="left">&nbsp;</td>
            <td><input class="sum-field" name="sum" type="text" /></td>
        </tr>
        <tr>
            <td class="left" style="text-align: right;">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
  <tbody>
<table>
3 years ago#9794

hoghoj1
176 Posts

Hi Juergen,

and thx for your help, now it works great. 

This makes me able to finish the task for a new customer.

Is there a way to change the style within these fields, so as to place the numbers to right side, and possibly also numeric as 150,00?

hoghoj1

3 years ago#9795

juergen
1.4K Posts
51.6K Downloads
16 Plugins
design, web development & visual effects

Is there a way to change the style within these fields, so as to place the numbers to right side, and possibly also numeric as 150,00?

HTML5 supports the "number" type for input and the "step" attribute:

<input step="any" style="text-align:right" type="number" value="149.99" />

When it comes to visually consistent number formatting, e.g for prices/currencies, JavaScript still has very limited support built-in and we would need some custom functions or 3rd party libraries.

Unfortunately web browsers themselves still aren't completely reliable when it comes to localization of number formats, see this article.
So, to make it work, we would have to use string manipulation methods, e.g. to always show decimal mark and trailing zeros, even with integers like 150.00.
Given the possible different localized formats and dictions ($ 1,234.56, € 1.234,56, € 1.234,--) together with calculations, this is sort of opening pandoras box.

So, there is unfortunately no simple solution.

 

Edited: 3 years ago#9799

a2exfr
242 Posts
24.7K Downloads
2 Themes
10 Plugins

Hi.

May be enought is to put currency symbol after input tag?)

type="number" min="0" step="0.01"

Edited: 3 years ago#9801

hoghoj1
176 Posts

Hi Juergen,

having read some of the content of your links, I can well see your point:-)

As I'm still a novice of coding, I'll let this pass for now - I can still use your html up till now for my purpose.

Thanks a lot for your valuable help!

hoghoj1

3 years ago#9802

juergen
1.4K Posts
51.6K Downloads
16 Plugins
design, web development & visual effects

@alex:  put currency symbol after input tag  would clearly help to keep string functions a bit simpler ;-)

@hoghoj1: You're welcome. Glad it works.

3 years ago#9807

Topic Closed

 

News

Typesetter 5.1
8/12/2017

Typesetter 5.0.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

Over 8 Times Faster Than Wordpress
5/3/2016

We've known for a long time that Typesetter is fast. It's something we take pride ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register