cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
MartinPAChamp
Helper I
Helper I

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

Hi 

 

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

 

Can I do this via JavaScript?

2 ACCEPTED SOLUTIONS

Accepted Solutions

Hi @MartinPAChamp 

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!

View solution in original post

HI @MartinPAChamp 

 

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. 

View solution in original post

11 REPLIES 11
the365bit
Resolver I
Resolver I

Hi @MartinPAChamp ,

 

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

 

the365bit_0-1595282976435.png

 

Hi @MartinPAChamp 

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!

View solution in original post

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

MartinPAChamp_0-1595320639159.png

 

the button

 

MartinPAChamp_1-1595320701211.png

 

MartinPAChamp_2-1595320729305.png

 

Sorry still very new to JavaScript so learning

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 




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

Hi @MartinPAChamp 

Did you clear the cache?

 

Have you checked by selecting other dropdown options? 

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 🙂

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%20...

 




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

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 

 

MartinPAChamp_0-1595333734929.png

After selecting to yes and back to no it works

 

MartinPAChamp_1-1595333803575.png

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

 

Many Thanks for you help 🙂

@OliverRodrigues 

 

Perfect worked straight away thank you 🙂

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Power Apps Community Call Jan. 2022 768x460.png

Power Apps Community Call

Please join us on Wednesday, January 19th, at 8a PDT. Come and learn from our amazing speakers!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Users online (1,793)