Multiple java script items help

Forms
1

Im very new to java script, I have a couple of forms that need to have multiple java script actions applied.
Can I place them seperately?
below is an example.

THey don't seem to work unless I only have one item in the js console

fd.spRendered(function() {

    function hideOrShowGrid() {
        if (fd.field('New_x0020_ingredients').value == 1) {
            // Show the grid field
            $('.grid-to-hide').$parent.$el.show();
        } else {
            // Hide the grid field
            $('.grid-to-hide').$parent.$el.hide();
        }
    }

    // Calling hideOrShowDueDate when the user changes the Start Date
    fd.field('New_x0020_ingredients').$on('change',hideOrShowGrid);

    // Calling hideOrShowDueDate on form loading
    hideOrShowGrid();

});

on edit form

//add submit button to the toolbar
fd.toolbar.buttons.unshift({
    class: 'btn-outline-primary',
    text: 'Submit',
    click: function() {
		
		fd.field('Status').value = 'Submitted for Approval';
		
		fd.save();
    }
});
2

Hello @Amys_Turtlgal,

I will be glad to help you!

What is the type of the 'New_x0020_ingredients' field?
Do you see any errors in the browser console(F12)?
Please share its screenshot.

Regarding the code in the Edit form, you need to use the code under spRendered event to run it in your form:

fd.spRendered(function() {

	//add submit button to the toolbar
	fd.toolbar.buttons.unshift({
		class: 'btn-outline-primary',
		text: 'Submit',
		click: function() {

			fd.field('Status').value = 'Submitted for Approval';

			fd.save();
		}
	});
});
3

Thanks so much
The F12 shows this:
TypeError: Cannot read property '$el' of undefined
at s.hideOrShowGrid (eval at e._executeCustomJavaScript (forms.plumsail.com/widget/1.0.7/spform.js:1), :26:39)
at Ve (forms.plumsail.com/widget/1.0.7/spform.js:42)
at s.e.$emit (forms.plumsail.com/widget/1.0.7/spform.js:42)
at s.value (forms.plumsail.com/widget/1.0.7/assets/js/11.4f25c3602da5b3836212.js:1)
at mn.run (forms.plumsail.com/widget/1.0.7/spform.js:42)
at pn (forms.plumsail.com/widget/1.0.7/spform.js:42)
at Array. (forms.plumsail.com/widget/1.0.7/spform.js:42)
at Ye (forms.plumsail.com/widget/1.0.7/spform.js:42)

and the field is a choice field.
The choices are blank, yes, and no, I'd like the grid to show on yes, and hide on blank or no including changes

4

Hello @Amys_Turtlgal,

Ok, I've missed that.
To hide/show grid container you need to use this code:

//Show grid container
$('.grid-to-hide').show();

//Hide grid container
$('.grid-to-hide').hide();

And the Choice field store value as a string, so if the choice options are yes, no and blank, you need to use this code:

fd.field('New_x0020_ingredients').value == 'yes'

I've updated the code, please test it.

fd.spRendered(function() {

    function hideOrShowGrid() {
        if (fd.field('New_x0020_ingredients').value == 'yes') {
            // Show the grid field
            $('.grid-to-hide').show();
        } else {
            // Hide the grid field
            $('.grid-to-hide').hide();
        }
    }

    // Calling hideOrShowDueDate when the user changes the Start Date
    fd.field('New_x0020_ingredients').$on('change',hideOrShowGrid);

    // Calling hideOrShowDueDate on form loading
    hideOrShowGrid();

});
5

Thank you this worked!

1 Like