Hide and show fields in Add/Edit Page

PHPMaker General Discussion (PHPMaker)
1

Hi,
I’m trying to hide and show some fields in the add and edit tables.
The script must hide the fields (in the example FIELD_B) when in FIELD_A I write 1 or 2 and it shows it when I have other values.
I have put this script in: Client Scripts → Table-Specific → Add Page → Startup Script and Client Scripts → Table-Specific → Edit Page → Startup Script
I created the script using the example proposed in Field Setup → Edit Tag → Client Side Events and some threads on the forum, but I can’t make it work.
My script is:

{
“hide”: function(e) {
$(“FIELD_A”).change(function() {
if (this.value == “1” || this.value == “2”) {
$(this).fields(“FIELD_B”).visible(false);
} else {
$(this).fields(“FIELD_B”).visible(true);
}
});
}
}

Can someone tell me what i’m missing?
After that, is it possible to add more than one function in the startup script to hide/show fields with differents conditions?
At the end, is it possible to hide an entire tab, in a multi-page form?
Best regards and thanks!

2

The selectors in $(“FIELD_A/B”) are not correct, you may right click the HTML element in Chrome and select “Inspect” to find the id of the element, see: https://developers.google.com/web/tools/chrome-devtools/dom#inspect.

3

Thanks you helped me a lot to make it work! now my new script is:
$(document).ready(function(){
$(“#x_FIELD_A”).on(“change”, function() {
var str = $(“option:selected”, this);
if (this.value == “1”) {
$(“#r_FIELD_B”).hide();
$(“#r_FIELD_C”).hide();
} else {
$(“#r_FIELD_B”).show();
$(“#r_FIELD_C”).show();
}
});
});
and it’s working.

I’m still figuring how to hide an entire tab, because
$(“#tab_xxx2”).hide();
(tab_xxx2 is my selector) is not working.

i changed
$(“FIELD_A”).change(function() {
with
$(“#x_FIELD_A”).on(“change”, function() {
because i’ve noticed that when i enter the edit page everything is shown, so i tried to use
$(“#x_FIELD_A”).on(“change”,“load”, function() {
to avoid this problem but it do nothing.
Thanks for your help!

4

latolap wrote:

I’m still figuring how to hide an entire tab

“Entire tab”? Did you mean you use Multi-Page? If so, see the topic Server Events and Client Scripts → Client Scripts → “Table-Specific → Add/Copy page” → Client Script → Example 1 in the help file. Note that the currentForm.multiPage object has togglePage(i, show) method to show/hide a page, you may refer to the source for the MultiPage class in ew.js.

5

arbei wrote:

Note that the currentForm.multiPage object has togglePage(i, show) method to show/hide a page

This was a key tip. I’ve added it like this:

$(“input[data-field=‘x_FIELD_A’]”).on(“change”,function() {
if (this.value == “1”) {
currentForm.multiPage.togglePage(4, false);
} else {
currentForm.multiPage.togglePage(4, true);
}
});


this is hiding the page 4 of the Multi-Page for FIELD_A = 1 and showing it for different values.

Any idea about how hide and show the fields when i load the page (i.e. when i’m in view page and click on edit button), because in this way i can dinamically hide and show my fields when i complete my page, but if i save, and click on edit, the fields are all automatically visible!

thanks again for your help!

6

You may try Startup Script of the page, see the topic Server Events and Client Scripts in the help file.

7

I managed to find a better solution for this, add .change(); at the end of the function.
It will looks something like:

$(“#x_FIELD”).change(function() {
… your function…
}).change();

this will automatically execute the on change function you just wrote.