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

20th March 2023

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"
Posted in Uncategorized

Leave a Reply

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

This will close in 0 seconds