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

Handling Forms with JavaScript – Checkbox Validation

I’m currently studying JavaScript and still in beginner level. So, I referred given code from a certain Open Learning Platform. Its intention was to validate whether the checkbox is checked or not (that’s how it was said in there). but it won’t output any message. Could you help me with it.

<body>
    <script type="text/javascript">
        const form = document.getElementById('form')
        const checkBox = document.getElementById('checkbox')
        const message =document.getElementById('message')
        
        form.addEventListener('submit', function checkBoxValidator(x) {
            x.preventDefault()
            if (checkBox.checked === true) {
                message.innerHTML = 'Done'
            }
            else {
                message.innerHTML = 'Please Check Something'
            }
        })
    </script>

    <form id="form">
        <input type="checkbox" id="checkbox"> Checkbox
        <button type="submit">Submit</button>
        <h3 id="message"></h3>
    </form>
</body>

Thank You!

I tried refer some external resources as such and as far as my knowledge I cannot find where the error stands.

Tags:

2

Answers


  1. 0

    This code might help you

    <body>
  <script type="text/javascript">

   const checkBox = document.getElementById("checkbox");
   const message = document.getElementById("message");

   function submitForm() {
     if (checkBox.checked === true) {
       message.innerHTML = "Done";
     } else {
       message.innerHTML = "Please Check Something";
     }
   }
</script>

  <form action="" onsubmit="submitForm()">
    <input type="checkbox" id="checkbox"> Checkbox
    <button type="submit">Submit</button>
    <h3 id="message"></h3>
  </form>
</body>
    Login or Signup to reply.
  2. 0

    Udith, there is a problem with your code.

    The script tag is not placed in the correct location. It is to be placed next to the close of the body tag, because the browser reads the html content from the top to the bottom, and as at the time he is reading the script, there is no DOM tags to read, it will not know how to deal with the content.

    Just move the script tag to the bottom and the correct code would look like this:

    <body>
    <form id="form">
        <input type="checkbox" id="checkbox"> Checkbox
        <button type="submit">Submit</button>
        <h3 id="message"></h3>
    </form>
    
    <script type="text/javascript">
        const form = document.getElementById('form')
        const checkBox = document.getElementById('checkbox')
        const message =document.getElementById('message')
        
        form.addEventListener('submit', function checkBoxValidator(x) {
            x.preventDefault()
            if (checkBox.checked === true) {
                message.innerHTML = 'Done'
            }
            else {
                message.innerHTML = 'Please Check Something'
            }
        })
    </script>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search