cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
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
Highlighted
Impactful Individual
Impactful Individual

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

Highlighted

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
Highlighted
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

 

Highlighted
Impactful Individual
Impactful Individual

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

Highlighted

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

Highlighted

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


 

Highlighted

Hi @MartinPAChamp 

Did you clear the cache?

 

Have you checked by selecting other dropdown options? 

Highlighted

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 🙂

Highlighted

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


 

Highlighted

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 🙂

Highlighted

@OliverRodrigues 

 

Perfect worked straight away thank you 🙂

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Users online (8,195)