calculation in fields | success/error-messages

This topic has 6 replies, 3 voices, and was last updated 2 months, 4 weeks ago by FizzPop Media.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
October 14, 2020 at 2:16 AM #22377

jw_bln
Participant

I have a number field "Lenght" and a number field "Width" (Lenght = 2, Width = 3 >> 2 x 3 = 6).
Now I want to calculate the default value of a third field called "Square Meters" based on the value of the two mentioned fields (in this case 6). Or it should be used as a conditional logic operator. How I can do this?

Is this a case of custom callback with jQuery (function xx() { return true; })?
Can you explain and show this using the above mentioned simple example.
What I have to enter in the graphical MB-Builder in field > General > Default value?
And where I have to place the jQuery to calculate? Inside that field or in an html-script tag?

//////////////
Is there a way to
a) hide the standard success or error messages (on MB-form-level and on single field level) not using css-hide and
b) catch the values with jQuery script (please create a small/simple example)

//////////////
Which jQuery is needed (frontend/backend) to work with metabox?
What happens if I change WordPress to the newest version?

Add New Note to this Reply

October 14, 2020 at 10:42 AM #22381
Long Nguyen
Moderator
Hi there,

> hide the standard success or error messages (on MB-form-level and on single field level)

What is the success and error message? We can simply hide the messages with some custom CSS code without touching other complicated PHP code.

> catch the values with jQuery script (please create a small/simple example)

I've created three number fields with the corresponding ID: width, length, square_meters. Using a small Javascript code to get two fields value and set the square value for the field square_meters.
```
jQuery(document).ready(function($) {
    $('body').on('keyup', '#width, #length', function() {
        var width = $('#width').val();
        var length = $('#length').val();
        var square_meters = width * length;
        $('#square_meters').val(square_meters);
    });
});
```
See more in my screen record https://www.loom.com/share/568c0be8096542c3bb05e2eb3fa6f75c.

> Which jQuery is needed (frontend/backend) to work with metabox?
What happens if I change WordPress to the newest version?

Meta Box uses the jQuery version depend on WordPress core 1.12.4 when enqueueing the script file, you can just use array( 'jquery' ) for the $deps parameter.

For more information, please follow the documentation.
https://developer.wordpress.org/reference/functions/wp_enqueue_script/#comment-content-276

Add New Note to this Reply
October 14, 2020 at 7:10 PM #22394

jw_bln
Participant

Hi, many thanks for the example given.
This gives me a good idea how to go forward 😉

Regarding jQuery version:
If I am not using the old jQuery version of WordPress, but instead enquing the latest jQuery version all function of Meta Box (frontend and backend) are still working?

Regarding hiding success message:
Below you can see some screenshots of a trial to use/style an autocomplete field.

1.) As you can see the green success message is completely wrong positioned.
Therefore I would like to hide this message and create my own message using jQuery...
So I am able to position/style the success or error messages in a way the design requires it.

There are different additional issues as you can see:
2.) I thought I can show the results inside the field (like multi-select field)
3.) In addition, the result is even shown after I selected an item (Management + management)
4.) "1 result is available" is even shown after CEO was selected and even after the submit button was pressend...
To be honest, I was stopping after a while as it seems not to be possible to get exprected results...
Maybe you can explain?

Related to this:
5.) Can I use an external submit button and hide the one used inside MB (e.g. for design reason) and using jQuery for submit function (if please show a simple example)?

Thanks for your answer.

Unfortunately there is no way to check the post before submitting - I hope the pictures are visible....

Add New Note to this Reply

October 14, 2020 at 11:25 PM #22396
Long Nguyen
Moderator
Hi,

Regarding jQuery version: Meta Box and extensions are compatible with the newest version of jQuery 3.5.1 but it's not encouraged because of WordPress core use 1.12.4, using the newest version of jQuery might break some plugins/themes and it also breaks the Meta Box's JavaScript function.

As you can see the green success message is completely wrong positioned.
Therefore I would like to hide this message and create my own message using jQuery…
So I am able to position/style the success or error messages in a way the design requires it.

It looks so weird when the form submitted and the field still shows next to the confirmation box. Could you please share the code which creates the field and shortcode to show the frontend form?

I thought I can show the results inside the field (like multi-select field)

The field autocomplete helps you to select an option from the list and show below the field, you can select other options after. If you want to show like the multi-select, please use the field select_advanced.

Can I use an external submit button and hide the one used inside MB (e.g. for design reason) and using jQuery for submit function (if please show a simple example).

Yes, you can create a custom button that has ID custom-submit then use this JavaScript code to hide the form submit button and trigger click this submit button when clicking the custom button.
```
jQuery(document).ready(function($) {
    $('.rwmb-form-submit button').hide();

    $('body').on('click', '#custom-submit', function() {
        $('.rwmb-form-submit button').trigger('click');
    });
});
```
Add New Note to this Reply
October 17, 2020 at 6:36 PM #22436
jw_bln
Participant
Hi,
thanks for your answer, will send you the link...

Regarding Calculation of field value:

Calculation-Example (with small changes) works well on the frontend, but not on backend fields.
```
jQuery(document).ready(function() {
    jQuery('body').on('keyup', '#number_plan, #number_actual', function() {
        var p = jQuery('#number_plan').val();
        var s = jQuery('#number_actual').val();
        var delay = p * s;
        if ( delay != 0 ) (
            jQuery('#number_delay').val(delay)
        );
    });
});
```
In addition, I added conditional logic, but also a similar effect.
</iframe>" alt="1" />

It works on the backend but not on the frontend...

Not sure why...

Regarding jQuery version:
OK, so changing to the newest version will break even MetaBox jquery/JS functions!
So there is no real possibility...
But WP will change jQuery-Version with the next version (2021??)...

Regarding Submit-Button:
Works well, thanks for the direction... !!

Regarding hiding success message:
Autocomplete versus Multi-select >> I don't see a big difference.
Both fields will give an array of results (but Autocomplete gives some ideas on how to fill). Can you create an option in Autocomplete to place the results inside the field?

Add New Note to this Reply
October 17, 2020 at 11:28 PM #22438

Long Nguyen
Moderator

Hi,

Regarding Calculation of field value

Please follow this documentation to know how to enqueue scripts in the backend (admin area) https://developer.wordpress.org/reference/hooks/admin_enqueue_scripts/.

Regarding jQuery version:

Don't worry, if there is any issue relates to the compatibility between Meta Box and WordPress core, we will release an update immediately to fix it.

Regarding hiding success message:

I'm going to create a featured request for the developer team to support an option to show the selected items in the field. Thank you.

Add New Note to this Reply

August 24, 2024 at 9:07 PM #46231

FizzPop Media
Participant

The loom is no longer functional in this reply. Also where do you include the jquery code listed?

Add New Note to this Reply
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

calculation in fields | success/error-messages | jQuery version