CODEWITHSUNDEEP
javascripthtml
ivan
ivan

Reputation: 331

Checkbox undefined behavior

I have a problem with radio buttons and checkboxes.

Please, see snippet below. The idea is the following: when user pushes 'I want to participate' button, the code should check if user had selected the checkbox and raise alert if not.

The alert is raised when needed, but when I close it, the checkbox becomes marked even if it was not before. Why it happens?

Thanks a lot!

<html>
<body>
<div id="consent"></div>
</body>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script type="text/javascript">


function consent() {
    var HTMLtext = "<label> <input type='checkbox' name='cons' value='agree' id='consAgree' /> I am age 18 or older and understand the information above. <\label><br>";
    
    HTMLtext += "<br><span id='submit_cons'><button type='button' onClick='javascript:evaluateConsent()'>I want to participate </button></span>";
    
    document.getElementById('consent').innerHTML = HTMLtext;
}

function evaluateConsent() {
    var isOK = 1;
    if(document.getElementById("consAgree").checked == false) {
        isOK = 0;
    }
    if(isOK == 0) {
        alert('Please make sure you have confirmed all three conditions.\nIf you do not want ot participate, return the HIT');
    }
    else {
        var HTMLtext = "Thank you! Now take a look at the example!";
        
        document.getElementById('submit_cons').innerHTML = HTMLtext + "<hr>";
    }
}
/*--MAIN--*/
function main(){
    consent();
}

$(document).ready(function() {
	//Ensure that form is not submitted upon pressing Enter key
	$(window).keydown(function(event){
		if(event.keyCode == 13) {
			event.preventDefault();
			return false;
		}
	});
	//call function to run experiment
	main();
});

</script>

</head>
</html>

Upvotes: 0

Views: 41

Answers (1)

Ele
Ele

Reputation: 33726

You're closing the label tag as follow: <\label>, that's incorrect change to this </label> 

function consent() {
  var HTMLtext = "<label> <input type='checkbox' name='cons' value='agree' id='consAgree' /> I am age 18 or older and understand the information above. </label><br>";

  HTMLtext += "<br><span id='submit_cons'><button type='button' onClick='javascript:evaluateConsent()'>I want to participate </button></span>";

  document.getElementById('consent').innerHTML = HTMLtext;
}

function evaluateConsent() {
  var isOK = 1;
  if (document.getElementById("consAgree").checked == false) {
    isOK = 0;
  }
  if (isOK == 0) {
    alert('Please make sure you have confirmed all three conditions.\nIf you do not want ot participate, return the HIT');
  } else {
    var HTMLtext = "Thank you! Now take a look at the example!";

    document.getElementById('submit_cons').innerHTML = HTMLtext + "<hr>";
  }
}
/*--MAIN--*/
function main() {
  consent();
}

$(document).ready(function() {
  //Ensure that form is not submitted upon pressing Enter key
  $(window).keydown(function(event) {
    if (event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
  //call function to run experiment
  main();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<div id="consent"></div>

See? now it's not being checked.

Upvotes: 1

Related Questions