Change form values using JavaScript

Question

I have been asked to change text and style of a specific button within a form after a submit.

JavaScript

openWarningBox(
    "/URL", 
    [{
        'classNames':'button sec',
        'text':'Continue',
        'clickEvent': function() {
            $(document.forms.button).trigger('submit');
        }
    }]
);

HTML

<form name="button" onsubmit="location.href='/URL'; return false;"></form>

I am aware this is done in a weird/wrong way and if it was written properly it would not have been an issue, but is there some way for me to change that button's classNames and text after it is being submitted?

Sebastian Gbudje · Accepted Answer · 2020-09-25 23:27:03Z

I am not sure if this is what you are looking for but I used the DOM to change the button text and style you can also change the font that way. The DOM seems like a good option to accomplish this task.

var btn = document.getElementById('btn')
btn.addEventListener('click', change)

function change(e){
  e.preventDefault()
  btn.style.backgroundColor = 'blue';
  btn.style.border = 'blue';
  btn.style.colr = 'black';
  btn.style.borderRadius = '26px';
  btn.innerHTML = 'Submitted'
}

button{
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button type="submit" id='btn'>Submit</button>
</body>
</html>

Collectives™ on Stack Overflow

Change form values using JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related