Question 175617 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can normal JS functions/conventions replace $(document).ready?

so I have the following code

    $(document).ready(function(){
        //enable submit button once user makes a radio button selection
        if (document.querySelector('input[name="benefitType"]')) {
            document.querySelectorAll('input[name="benefitType"]').forEach((elem, i) => {
                elem.addEventListener("change", function(event) {
                    document.querySelector('#benefit-quote-submit').disabled = false;
                });
            });
        }

basically, I am enabling the submit button (of type <button) when one of the radio buttons in the form is selected.

I want to replace $(document).ready with normal Javascript equivalents.

I tried

if(document.readyState === 'ready' || document.readyState === 'complete') {
  doSomething();

but it’s not working (when I said it’s not working, my breakpoint on this line "elem.addEventListener" is not breaking the execution. It works fine though with $(document).ready.

Thank you.

Tags:

3

Answers


  1. 0

    So you want to do some action when the website is loaded.

    You can use the onload event on the body:

    document.body.onload = () => doSomething();

    Or you can achieve the same by adding an event listener:

    document.body.addEventListener("DOMContentLoaded", () => doSomething());

    I hope this helps!

    Login or Signup to reply.
  2. 0

    To replace $(document).ready with normal JavaScript equivalents, you can use the DOMContentLoaded event.

    Here’s an example of how you can modify your code:

    
document.addEventListener("DOMContentLoaded", function() {
  // enable submit button once user makes a radio button selection
  if (document.querySelector('input[name="benefitType"]')) {
    document.querySelectorAll('input[name="benefitType"]').forEach((elem, i) => {
      elem.addEventListener("change", function(event) {
        document.querySelector('#benefit-quote-submit').disabled = false;
      });
    });
  }
});

    Happy coding:)

    Login or Signup to reply.
  3. 0

    The document/DOM is ready when the DOMContentLoded event happens on the document.

    So here is a complete example of how the button can be enabled when the form is valid. There is no reason to have event listeners on each input. When something happens in the form you can just test using checkValidity() on the form.

    document.addEventListener('DOMContentLoaded', e => {
  // event listener for submitting the form
  document.forms.form01.addEventListener('submit', e => {
    e.preventDefault();
    console.log('You selected:', e.target.benefitType.value);
  });
  // When something has changed in the form
  // test if valid and change button
  document.forms.form01.addEventListener('input', e => {
    if(e.target.form.checkValidity()){
      e.target.form.sumitbtn.disabled = false;
    }
  });
  document.forms.form01.addEventListener('change', e => {
    if(e.target.form.checkValidity()){
      e.target.form.sumitbtn.disabled = false;
    }
  });
});
    <form name="form01">
  <label>X<input type="radio" name="benefitType" value="x" required></label>
  <label>Y<input type="radio" name="benefitType" value="y"></label>
  <label>Z<input type="radio" name="benefitType" value="z"></label>
  <button name="sumitbtn" disabled>Submit</button>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search