Show/Hide Button based on Dropdown selection - Portal Webforms - JavaScript

(0) Share

Report

Posted on by Community Power Pla... Microsoft Employee

I am trying to disable a Submit button based on a dropdown box in a portal webform?

Can I do this via JavaScript?

Categories:

Power Apps portals

All responses (11)

Answers (2)

Sort by

the365bit 136 on at

Like
a
(2)

Report
Copy link

Link copied!

Hi @Anonymous ,

Yes, you can do that by adding javascript in the Custom Javascript field in the "Form Options" tab of your web form step.
Verified answer

H V 1,510 on at

Like
a
(4)

Report
Copy link

Link copied!
Hi @Anonymous
In addition answer of @the365bit
If you are using Web Form:
Go to Web Form Step -> Click on 'Form Options' tab -> Add below code in JavaScript Section:

$(document).ready(function(){ $("#new_optionsetfieldlogicalname").change(function () { // Get value of your trigger field let currentVal = $("#new_optionsetfieldlogicalname option:selected").val(); //do some validation if(currentVal == "459490001") { $("input[type='button'][value='Submit']").hide(); } else { $("input[type='button'][value='Submit']").show(); } }); });

If you are using Entity Form and Web Page, then you have to add javascript into localized content page.
Note: You have to put your optionset field's logical name instead of "new_optionsetfieldlogicalname".

If you like this post, give a Thumbs up. Where it solved your query, Mark as a Solution so it can help other people!
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!
Good Morning @hardikv ,

Thank you for you help and code 🙂

i have tried this code below but doesn't seem to like the code?

$(document).ready(function(){ $("#iii_submitted").change(function () { // Get value of your trigger field let currentVal = $("#iii_submitted option:selected").val(); //do some validation if(currentVal == "0") { $("input[type='button'][value='Submit your Request']").hide(); } else { $("input[type='button'][value='Submit your Request']").show(); } }); });

i am sure iv changed the correct code

this is the dropdown box

the button

Sorry still very new to JavaScript so learning
oliver.rodrigues 9,482 Most Valuable Professional on at

Like
a
(1)

Report
Copy link

Link copied!

from a quick look the code looks fine

can you add a few console.log("message"); in between the lines so we can see in the console where it is hitting ?

also where are you placing the JS code? I would suggest the Entity Form custom JavaScript section
H V 1,510 on at

Like
a
(1)

Report
Copy link

Link copied!

Hi @Anonymous
Did you clear the cache?

Have you checked by selecting other dropdown options?
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

Sorry guys @hardikv , @OliverRodrigues my bad,

its working now 🙂 i was sure i hit the clear cache button, i think its to early lol

Thank you for your help 🙂

one other quick question in webforms i have a date field that show the format as mm/dd/yyyy and would like it in dd/mm/yyyy

its it possible to change the date format via JavaScript as well? or have i missed something in the portal management?

Thanks again 🙂
oliver.rodrigues 9,482 Most Valuable Professional on at

Like
a
(1)

Report
Copy link

Link copied!

there is a site settings you can change the format
https://spandcrm.com/2018/06/11/dynamics-365-crm-portals-how-to-change-the-date-format/#:~:text=A%20short%20article%20today%20just,Navigate%20to%20Portals%20%3E%20Site%20Settings.&text=Refresh%20a%20page%20on%20your,showing%20in%20the%20specified%20format.
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

Hey Guys @OliverRodrigues, @hardikv

Following on from the Hide/Show the button doesnt seem to default to hidden? it works fine after i have selected yes and then back to no?

On load

After selecting to yes and back to no it works

is there a way to it default the button to be hidden on screen load?

Many Thanks for you help 🙂
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

@OliverRodrigues

Perfect worked straight away thank you 🙂
Verified answer

H V 1,510 on at

Like
a
(2)

Report
Copy link

Link copied!
HI @Anonymous

For onload, you should use below code:
$(document).ready(function(){ let currentVal = $("#iii_submitted option:selected").val(); //do some validation if(currentVal == "0") { $("input[type='button'][value='Submit your Request']").hide(); } else { $("input[type='button'][value='Submit your Request']").show(); } $("#iii_submitted").change(function () { // Get value of your trigger field let currentVal = $("#iii_submitted option:selected").val(); //do some validation if(currentVal == "0") { $("input[type='button'][value='Submit your Request']").hide(); } else { $("input[type='button'][value='Submit your Request']").show(); } }); });

Clear cache first and check it.

If you like this post, give a Thumbs up. Where it solved your query, Mark as Solution so it can help other people.