basic javascript question about disabling buttons

Question

I have a simple piece of javascript embedded into my html form, not a separate file, that is supposed to disable the submit form button until a certain checkbox has been checked but it doesn't seem to be working.

<script>
    var disclaimer = document.getElementById("disclaimer");
    var submitButton = document.getElementById("submit");

    submitButton.disabled = true;
    if (disclaimer.checked) {
        submitButton.disabled = false;
    }

 </script>

which I wrote and seems simple and effective but I'm not getting the results I'm looking for. After researching I see results such as

$('#check').click(function(){
if($(this).attr('checked') == false){
    $('#btncheck').attr("disabled","disabled");   
}
else
    $('#btncheck').removeAttr('disabled');
});

Now obviously the variable names and such are named differently but this doesn't even look remotely similar to the javascript code I've provided above and I'm having a hard time getting useful tips from the apparently working code below that does the same thing. Could someone break down the code segment below such that I might be able to fix my code above?

This is the snippet of code with the two HTML id's in question,

<label style='font-size: smaller;'>
  <input type='checkbox' name='disclaimer' id='disclaimer' required='required' />
  I understand that by submitting this form, 
  I am transferring any copyright and intellectual property rights to the form's owner, 
  that I have the right to do so,
  and that my submission is not infringing on other people's rights.
</label><br/>

<script>
    var disclaimer = document.getElementById("disclaimer");
    var submitButton = document.getElementById("submit");

    submitButton.disabled = true;
    if (disclaimer.checked) {
        submitButton.disabled = false;
    }

 </script>


  <div class='vspace'/>
  <input type='submit' id='submit' name='came-from-form'/>

Edit: Tons of great answers below that were very informative for letting me know what I'm working with. The issue I'm now facing is implementing these things. In the snippets below this seems very easy to implement but as I try to implement each answer below I'm not seeing any results which clearly means I'm doing something wrong somewhere else in my form. I've attached a larger snippet of the code in question if it helps. Otherwise it might be best to ask a new question.

Im not sure if you are aware but the second code is jQuery (a javascript library). It really helps but you could still get the same result with plain javascript. What you are missing is event listeners. — Bryan Loresto
– Bryan Loresto, Commented Nov 7, 2018 at 6:51

Mamun · Accepted Answer · 2018-11-07 07:24:29Z

1

I believe you trying to find the solution in vanilla JavaScript.

You have to attach the event to the check element like the following way:

var disclaimer = document.getElementById("disclaimer");
document.getElementById("submit").disabled = true;
disclaimer.addEventListener('click', function(){
  var submitButton = document.getElementById("submit");
  submitButton.disabled = true;
  if (this.checked) {
      submitButton.disabled = false;
  }
});

<form>
  <input type="checkbox" id="disclaimer"/>
  <button id="submit">Submit</button>
</form>

Update:

In your code, the script is executing before the DOM is fully loaded. Hence you get a error:

Uncaught TypeError: Cannot set property 'disabled' of null

You can either place the script at the end or wrap your code with

DOMContentLoaded

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event load should be used only to detect a fully-loaded page. It is an incredibly common mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.

<label style='font-size: smaller;'>
<input type='checkbox' name='disclaimer' id='disclaimer' required='required' />
I understand that by submitting this form, 
I am transferring any copyright and intellectual property rights to the form's owner, 
that I have the right to do so,
and that my submission is not infringing on other people's rights.
</label><br/>

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var disclaimer = document.getElementById("disclaimer");
    document.getElementById("submit").disabled = true;
    disclaimer.addEventListener('click', function(){
      var submitButton = document.getElementById("submit");
      submitButton.disabled = true;
      if (this.checked) {
        submitButton.disabled = false;
      }
    });
  });

</script>


<div class='vspace'/>
<input type='submit' id='submit' name='came-from-form'/>

edited Nov 7, 2018 at 7:24

answered Nov 7, 2018 at 6:50

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mikel Over a year ago

yes this is certainly the way I'm trying to implement this simply just vanilla javascript. I've tried implementing your answer but just doesn't seem to be working. Obviously this is something on my end of implementation since this very clearly works. Would I need to put this snippet in <script> tags AFTER I create the <input type='submit' id='submit'/>?

Mamun Over a year ago

@Mikel, yes you can try that....but I will suggest you to update the question with relevant HTML if possible....as this will help understand the real issue and find the solution easily.......thanks.

Mikel Over a year ago

will do! one moment

Mikel Over a year ago

yes this works great @Mamun could you explain what you changed about the form for it to work? particularly in the script tags, what is the "DOMContentLoaded"? Thanks again

Mamun Over a year ago

@Mikel, DOMContentLoaded ensures that all the code written inside will be executed after the all the HTML loaded.....I have added some details and a link. Please visit the link for more information.......thanks.

vol7ron · Accepted Answer · 2018-11-07 07:07:16Z

1

Quick Explantion

Here's a quick explanation of the code, which is heavily reliant on the JavaScript library, jQuery:

// click() is called every time the element `id="check"` is clicked
$('#check').click(function(){

  // if element with `id="check"` has an attribute called *checked* set to false or it is null, then perform the if-block, otherwise perform the else-block
  if($(this).attr('checked') == false){
    // set disabled attribute of element with `id="btncheck"` to value of `disabled`
    $('#btncheck').attr("disabled","disabled");   
  }
  else
    // remove disabled attribute of element with `id="btncheck"`
    $('#btncheck').removeAttr('disabled');
});

anything in $() is selecting the element in the DOM, primarily using CSS-like selectors
.attr() is a method that gets/sets the element HTML attribute
.removeAttr() is a method that removes the HTML attribute

Vanilla JS

What you want to accomplish can be done with vanilla JS.

const disclaimer   = document.querySelector("#disclaimer");
const submit       = document.querySelector("#submit");
submit.disabled    = true;    // default setting
const clickHandler = (event) => submit.disabled = !event.target.checked;

disclaimer.addEventListener('click', clickHandler );   // attach event

<form>
  <input type="checkbox" id="disclaimer"/>
  <button id="submit">Submit</button>
</form>

answered Nov 7, 2018 at 7:07

vol7ron

42.3k22 gold badges126 silver badges178 bronze badges

1 Comment

Mikel Over a year ago

Thank you this was very informative on both sides of my question! I had a really hard time trying to comprehend the syntax and whether or not it was actually vanilla javascript I was looking at.

Iishfaaq Ismath · Accepted Answer · 2018-11-07 06:49:36Z

0

Hope this will work for you

   $('#disclaimer').click(function(){
if($(this).attr('checked') == false){
    $('#submit').attr("disabled","disabled");   
}
else
    $('#submit').removeAttr('disabled');
});

Here if condition indicates the action which should be done if the disclaimer is not chcked. Button will be enable if the disclaimer is checked.

answered Nov 7, 2018 at 6:49

Iishfaaq Ismath

771 silver badge13 bronze badges

Comments

Snake Eyes · Accepted Answer · 2018-11-07 06:50:00Z

0

If you want jQuery, use prop (is not wrong to use attr too but I prefer prop instead). For checkbox, use change event instead of click. I'd do like:

$('#check').on("change", function(){
   var isChecked = $(this).is(':checked');
   $('#btncheck').prop("disabled", !isChecked); 
});

answered Nov 7, 2018 at 6:50

Snake Eyes

16.8k39 gold badges120 silver badges235 bronze badges

Comments

Florian F. · Accepted Answer · 2018-11-07 06:51:23Z

0

The only significant difference between the 2 code samples you posted is that the second one wraps the button disabling in the click event.

First one says : Straight when page is loaded, if the checkbox is checked, enable the button. (hint: happens only once)

Second one says : For each click on the checkbox, if the checkbox is checked, enable the button.

Something like this should work (haven't tested) :

<script>
    var disclaimer = document.getElementById("disclaimer");
    var submitButton = document.getElementById("submit");

    function disableSubmitIfDisclaimerNotAccepted(){
        submitButton.disabled = true;
        if (disclaimer.checked) {
            submitButton.disabled = false;
        }

    }

    disclaimer.onclick = disableSubmitIfDisclaimerNotAccepted; // everytime the checkbox is clicked
    disableSubmitIfDisclaimerNotAccepted(); // on page load
</script>

edited Nov 7, 2018 at 6:51

answered Nov 7, 2018 at 6:46

Florian F.

4,70029 silver badges50 bronze badges

2 Comments

Mikel Over a year ago

The desired behavior I'm looking for is for the submit button to be disabled upon loading the page and once the checkbox has been checked to enable the button. Is that not what I'm achieving in the first code segment?

Florian F. Over a year ago

No, the first code only happens on initial page load.

Andrei Todorut · Accepted Answer · 2018-11-07 07:13:58Z

0

You must listen to input events in order to make changes when something change, like checking an checkbox.

var disclaimer = document.getElementById("disclaimer");
var submitButton = document.getElementById("submit");

submitButton.disabled = true;

disclaimer.addEventListener('change', function() {
  if (this.checked) {
    submitButton.disabled = false;
  } else {
    submitButton.disabled = true;
  }
})

More about events: https://developer.mozilla.org/en-US/docs/Web/Events

answered Nov 7, 2018 at 7:13

Andrei Todorut

4,5762 gold badges19 silver badges27 bronze badges

Comments

KaKi87 · Accepted Answer · 2018-11-07 07:30:17Z

0

Submit button disabled by default in HTML :

<input type="checkbox" id="disclaimer">
<label for="disclaimer">Disclaimer</label>

<input type="submit" id="submit" disabled>

Simplest solution using ES6 syntax without JQuery :

let disclaimerCheckbox = document.getElementById('disclaimer'),
    submitButton       = document.getElementById('submit');

disclaimerCheckbox.onchange = () => submitButton.disabled = !disclaimerCheckbox.checked;

JSFiddle

NOTE : no need to use the DOMContentLoaded event if the script has the defer attribute.

edited Nov 7, 2018 at 7:30

answered Nov 7, 2018 at 7:23

KaKi87

9557 silver badges17 bronze badges

Collectives™ on Stack Overflow

basic javascript question about disabling buttons

7 Answers 7

5 Comments

Quick Explantion

Vanilla JS

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

Quick Explantion

Vanilla JS

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related