Updating the text on a basic form submit button in Power Pages using JavaScript

In this short blog post on Power Pages, we’ll take a look at how you can update the text on a basic forms submit button for it to say something else. Identifying the element To identify the element we will need to find and… READ MORE [https://lewisdoes.dev/blog/updating-the-text-on-a-basic-form-
a white paper in a vintage typewriter
Photo by Markus Winkler on Pexels.com
In: Low Code Lewis Content 🚀

In this short blog post on Power Pages, we’ll take a look at how you can update the text on a basic forms submit button for it to say something else.

Identifying the element

To identify the element we will need to find and control using JavaScript lets head into the inspect dev tools in the preview version of our website and select the button/the element we want to get the id for.

Use this tool and then select your button. You’ll notice the button is rendered using an <input> tag with various properties. We need to update the value. We can see there is also an id. Let’s keep hold of this id for use in our JavaScript. Mine is “InsertButton”. Yours will likely be the same.

Editing the code

Now we need to go to the right place to edit our code in Power Pages. Head to the page where your basic form is and select ‘Edit code’. This will open up your page in Visual Studio Code for the web.

Get the button

So the first line of code in our JavaScript file needs to be us declaring a constant variable with our button. We can get hold our button using document.querySelector.

Our code will look like this

const submitButton = document.querySelector('#InsertButton')

You can see above the value we need to supply to document.querySelector is simply ‘#’ with the id of our element after the #.

Updating the value

Now we have our button held in a variable, we will be able to use submitButton.value to change the value of our button. Very simply use the following code to update the text inside of your forms submit button.

submitButton.value = "The text you want to display"
Written by
Lewis Baybutt
Microsoft Business Applications MVP • Power Platform Consultant • Blogger • Community Contributor • #CommunityRocks • #SharingIsCaring
Comments
Great! You’ve successfully signed up.
Welcome back! You've successfully signed in.
You've successfully subscribed to LewisDoesDev.
Your link has expired.
Success! Check your email for magic link to sign-in.
Success! Your billing info has been updated.
Your billing was not updated.