Extending User plugin form and run JS functions before the form saved

[yabasha]

Expected behavior

After extending the user plugin with extra fields I want to run javascript functions on the value of the extended fields and save the result in a hidden field that is named as a db field name which will be saved after submitting the form.

Actual behavior

I can just extend the fields but I don't know how to run JS functions, I tried October CMS Javascript API but no luck.

Reproduce steps

Extend users plugin with extra fields

October build

(October build number) 443

[ivandoric]

Did you try using just using "brute force". What I mean is add this type of script on the page in question:

const form = document.querySelector('.MyForm')

form.addEventListener('submit', function(event) {
    event.preventDefault()

    // Do what you want with form fields

    form.submit()
})

Maybe something like this could work. But I'm not sure. There is probably a cleaner way to do this I'm just not aware of it.

[yabasha]

thanx @ivandoric but it is not clear where to put the script as i am editting the Plugin.php file, I am following the video titled "Making Websites With October CMS - Part 23 - Extending User Plugin"

[ivandoric]

Just try putting it anywhere. You can even try put it in <script> tags on the layout page before any Octobers JS is loaded. Just to see if that will work for you.

[yabasha]

i am working on the backend form which doesn't have any layout file, just Plugin.php

[ivandoric]

The layout file for your theme. Should be something like /themes/themeName/layouts/default.htm

[yabasha]

@ivandoric I added extra fields to User plugin backend form as below inside my custom plugin:

public function boot()
    {
UsersController::extendFormFields(function ($form, $model, $context) {
$form->addTabFields([
                'passport_number' => [
                    'label' => 'Passport Number',
                    'type' => 'text',
                    'span' => 'storm',
                    'cssClass' => 'col-md-6',
                    'tab' => 'Security Profile',
                    'required' => 'true'
                ],
                'nationality' => [
                    'label' => 'Nationality',
                    'type' => 'text',
                    'span' => 'storm',
                    'cssClass' => 'col-md-6',
                    'tab' => 'Security Profile',
                    'required' => 'true'
                ],
                'passport_expiry' => [
                    'label' => 'Passport Expiry Date',
                    'type' => 'datepicker',
                    'mode' => 'date',
                    'ignoreTimezone' => 'true',
                    'span' => 'storm',
                    'cssClass' => 'col-md-4',
                    'tab' => 'Security Profile',
                    'required' => 'true'
                ],
,
,
,
]);
});
}

When I go to the user menu:

I want to run javascript functions when user click save / save and close after that to submit the data to the database:

As I know the layout file does not affect the backend form, so how to control the user backend form?

[ivandoric]

You are right. It doesn't. Did you maybe see this forum post. Test if this works for you: https://octobercms.com/forum/post/javascript-in-backend-forms

You should add the line from the forum in the controller of your plugin.