Search code examples
javascripthtmlbuttontext

Give an input button with no value HTML tag a different value

I'm using UserWP plugin in Wordpress and on my registration page I have the form and the button which says "Submit Query" - not the best text. I'd much rather have "Register".

There's no option in the settings to change the button text so trying to utilise another method.

The HTML string for the button is:

<input type="submit" name="uwp_register_submit" class="form-control btn btn-primary btn-block text-uppercase uwp_register_submit">

So there is no "value" for the text.

My aim is to "inject" the value="Register" into the HTML string. I believe this can be done with a JavaScript snippet, but not being the best at JS, I'm struggling to achieve it.

Lots of googling found some JS code that finds a text string in the identifier and replaces it, however I cannot seem to get this working.

const button = document.querySelector('input');

button.addEventListener('click', updateButton);

function updateButton() {
  if (button.value === '') {
    button.value = 'Register';
  }
}

I realise this would only take effect on click, so when the button is pressed. So tried something like:

const button = document.querySelector('input');

if (button.value === '') {
    button.value = 'Register';
  }

Again, no success.

And I also saw something about using jquery? So tried the following without success.

$('.btn').val('Register');

I simply want to target the class of the button and tell it to give a value of "Register" - I bet it's an easy solution for someone, but not me...

Solution

  • In general you can achieve that by getting the element and setting the value as you try.

    But the line document.querySelector('input'); gives you back the first matching element back. See MDN Document.querySelector

    So if there are more than one input fields, it will take the first input, which may not be your submit input.

    An alternative would be to search for the specific name of the input field.

    document.addEventListener("DOMContentLoaded", function(event) {
   document.querySelector("[name='uwp_register_submit']").value = "Register";
});

    If that field exists multiple times, use querySelectorAll and combine it with an loop.

    In your specific case it would maybe the better way to change the default translation for english. Have a look at the documentation. It looks more complicated as it is.