Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

83
Views
Make an action after two events happened - JS

Want to change submit button color after email verification and checkbox marked. Added listeners on changes and they work well. But have no idea how to find out when this events are going to happen to launch function what is going to change submit button color.

```
https://jsfiddle.net/nvologdins/brfj2xk1/
```
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Here is a basic example of how to do this.

I also changed the logic a bit to update the values if the user changes them again. - @Ultimater mentioned this also.


function setupButton() {
  if (validEmail && validCheckbox) {
    // add/show/enable submit button or simply change the color
    button.style.color = "red";
  } else {
    // remove/hide/disable submit button revert the changes
    button.style.color = "";
  }
}
form.input.addEventListener('input', (event)=>{
  validEmail = emailRegex.test(event.target.value);
  setupButton();
})
form.checkbox.addEventListener('change', (event)=>{
  validCheckbox = event.target.checked;
  setupButton();
})

I would also suggest a different method to validate the form using the Constraint Validation API.

Every element has a validity check which can easily be accessed on the form element using formElement.checkValidity() and returns true/false if all (required) fields inside the form are filled with valid values.

<form oninput="this.querySelector('#submitButton').disabled = !this.checkValidity();" onsubmit="event.preventDefault(); console.log('Submit prevented but the form seems to be valid.'); return false;">
  <fieldset>
    <label for="newslettermail">E-Mail</label>
    <!-- you could also define a more specific pattern on the email input since email would allow foo@bar as valid mail -->
    <input type="email" id="newslettermail" required>
  </fieldset>
  <fieldset>
    <input type="checkbox" id="newsletterAcceptTos" required>
    <label for="newsletterAcceptTos">I accept the Terms of Service</label>
  </fieldset>
  <fieldset>
    <label for="textFieldWithPattern">Enter <strong>foo</strong> or <strong>bar</strong></label>
    <input type="text" id="textFieldWithPattern" pattern="^(foo|bar)$" required>
  </fieldset>
  <button type="submit" id="submitButton" disabled>Submit</button>
  <button type="submit">Force submit (will show errors on invalid input)</button>
</form>

Using this, the browser for itself checks the values if they contain a valid value.

  • An input[type=email] with required flag must contain a valid mail address.
  • A checkbox with required flag, must be checked.
  • An input with required and a pattern must contain a value matching the regular expression from the pattern-attribute.
about 4 years ago · Juan Pablo Isaza Report

0

No need to create extra variables and listen on two form elements separately... You can check the whole thing and update accordingly only by listening to the form element

let form = document.querySelector('form');
let input = document.getElementById('input');
let checkbox = document.getElementById('checkbox');
let submit = document.getElementById('button');

const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

form.addEventListener('change', (event) => {
  if (checkbox.checked && emailRegex.test(input.value)) {
    submit.style.color = "red";
  } else {
    submit.style.color = "black"
  }
})

//Update
input.addEventListener('input', () => {
  const changeEvent = new Event('change');
  form.dispatchEvent(changeEvent)
})
<form class="main__emailAndTerms emailAndTerms">
  <div class="emailAndTerms__email">
    <input type="text" id="input" placeholder="Type your email address here...">
    <label class="emailAndTerms__terms">I agree to <a href="#"><span class="terms__link">terms of service</span></a>
                <input type="checkbox" class="terms__checkbox" id="checkbox">
                <span class="terms__checkbox_custom"></span>
            </label>
    <button type="submit" class="email__submitButton" id="button">Submit</button>
  </div>
</form>

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!