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

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

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');
    });
});

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.