How can I have this specific class of button redirect when clicked/enter, while keeping the original functionality?

Question

I have this button on a novalidate html form and I'm trying to get it to redirect to another webpage, while keeping the original functionality of creating an account.

<button class="yWSHVqDY3QXtLSenwRoA" data-test="create-account-create-button" type="submit"><span>Create account</span></button>

The end goal is for when a user creates an account, the button automatically redirects them to a payment page. I'm super new to coding, so I'm not sure if this is possible, but any help is appreciated!

Answer 1

click and keydown event listeners to your rescue.

const btn = document.querySelector('.yWSHVqDY3QXtLSenwRoA')
btn.addEventListener('click', () => location.href = 'https://google.com')
btn.addEventListener('keydown', (e) => {
  if (e.key == 'Enter') {
    location.href = 'https://google.com'
  }
})

<button class="yWSHVqDY3QXtLSenwRoA" data-test="create-account-create-button" type="submit"><span>Create account</span></button>

Answer 2

In a form you would use the action attribute to specify where the form submit to.

<form action="/create_account" method="get">
  <button class="yWSHVqDY3QXtLSenwRoA"
    data-test="create-account-create-button" type="submit">
    <span>Create account</span>
  </button>
</form>

If you have more buttons in the same form you can use the formaction attribute on the button to override the default:

<form action="/login" method="get">
  <button class="yWSHVqDY3QXtLSenwRoA" formaction="/create_account"
  data-test="create-account-create-button" type="submit">
    <span>Create account</span>
  </button>
  <button type="submit">Login</button>
</form>