MAKE TEXT APPEAR WHEN SUBMIT BUTTON CLICKED AND CHECKBOX IS UNCHECKED

ezra heywood

Total Post:145

Points:1019
Posted by  ezra heywood
 1010  View(s)
Ratings:
Rate this:
I am trying to create an agree to terms and agreements. However, when the button is unchecked and the user hits submit, I want it to present the user with an alert telling him to agree to the terms. At first, I made it to where the user couldn't even click on the submit button when the checkbox is unchecked, however, I want the user to be able to click it so he can be alerted with an error. I can't seem to get my code to work no matter what.

var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('submit');
checker.onchange = function(){
if(this.checked){
    sendbtn.disabled = false;
} else {
    sendbtn.disabled = true;
}
if(document.getElementById('submit').click() & document.getElementById("myCheck").checked = false;){
            alert("Hello! I am an alert box!!");
}

}


<input type="checkbox" id="checkme"/>
I agree to the terms & service<br />

<input type="submit" name="sendNewSms" class="md-trigger blue-texture postbit-button-big md-pointer" data-modal="modal-five" id="submit" value=" Send "  onclick="$('.md-modal').removeClass('md-show');" disabled/>
  1. Elena Glibart

    Post:42

    Points:296
    Re: Make text appear when submit button clicked and checkbox is unchecked

    I want the user to be able to click it so he can be alerted with an error

    Remove the disabled from the submit button.
    Remove the checker.onchange = function(){
    Make sure to event.preventDefault(); browser triggering form submits or other default evett actions
    All you need:

    var checker = document.getElementById('checkme');
    var sendbtn = document.getElementById('submit');

    sendbtn.onclick = function( event ){
      event.preventDefault();
      if(!checker.checked){
        alert("You must agree to our terms of service");
      }
    };
    Note that you might want to do the above not on button Click but on formID.onsubmit (the form can always be submitted even without a Button click. Not seeing your form this is all I can suggest.)

    P.S:
    Developer Console (access by F12 and click Console) helps to debug such errors like &/&& =/=== missing ; etc...

    P.S2: when using only JS a handy function to fast-get an element by ID can be achieved with a nice little function i.e:

    function ID(id){return document.getElementById(id);} // ...and use like:
    var submitBtn = ID("submit");

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!