Home > DeveloperSection > Forums > Make text appear when submit button clicked and checkbox is unchecked
ezra heywood
ezra heywood

Total Post:145

Points:1019
Posted on    December-31-2014 11:19 PM

 JQuery JQuery  JavaScript  HTML 
Ratings:


 1 Reply(s)
 682  View(s)
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/>


Elena Glibart
Elena Glibart

Total Post:32

Points:226
Posted on    December-31-2014 11:31 PM

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");

Don't want to miss updates? Please click the below button!

Follow MindStick