Agree to continue tick box isn't preventing continue - javascript

The last couple of days I've been tackling the issue of preventing a user from moving forward, unless they click on the tick box to agree to the terms. However, the button is allowing them to continue even if they do not click the box. Any thoughts on why?
<form action="form.php">
<script>
var cb = document.getElementById("cb"),
button = document.getElementById("button");
button.disabled = true;
cb.onclick = function(){
if(cb.checked checked){
button.disabled = false;
}
else{
button.disabled = true;
}
};
</script>
<input type="checkbox" id="cb" name="checkbox">
<font face="Arial, Helvetica, sans-serif" color="#FFFFFF">I Have Read And
Agree To The Terms And Conditions<br>
(check the box if you agree and want to continue)
</font>
<br>
<input type="submit" id="button" value="CONTINUE" name="submit" class="button">
</form>

For anyone else looking for this solution here it is.
<form action="form.php">
<script>
let submitBtn = document.querySelector("button");
document.querySelector("input").addEventListener("click", function(){
if(this.checked){
submitBtn.disabled = false;
} else {
submitBtn.disabled = true;
}
});
</script>
<input type="checkbox" id="tick" onchange="document.getElementById('terms').disabled = !this.checked;" />
<font face="Arial, Helvetica, sans-serif" color="#FFFFFF">
I Have Read And Agree To The Terms And Conditions<br>(check the box if you agree and want to continue)
</font>
<br>
<button type="submit" class="button" name="terms" id="terms" disabled>
CONTINUE
</button>
</form>

The issue is with the conditional statement in the cb.onclick function. You have two checked keywords, but only one is needed.
var cb =
document.getElementById("cb"),
button =
document.getElementById("button");
button.disabled = true;
cb.onclick = function(){
if(cb.checked){
button.disabled = false;
}
else{
button.disabled = true;
}
};

Related

Best way to disable and enable textboxes

I'm writing a simple html code that does enable and disable some textboxes on button clicks. Below is my code.
function myFunction1() {
document.querySelector('#myText0').disabled = true;
document.querySelector('#myText1').disabled = true;
document.querySelector('#myText2').disabled = false;
document.querySelector('#myText3').disabled = false;
document.querySelector('#myText4').disabled = false;
}
function myFunction2() {
document.querySelector('#myText0').disabled = false;
document.querySelector('#myText1').disabled = false;
document.querySelector('#myText2').disabled = true;
document.querySelector('#myText3').disabled = true;
document.querySelector('#myText4').disabled = true;
}
function myFunction3() {
document.querySelectorAll("input").disabled = true;
document.querySelector('#myText2').disabled = false;
document.querySelector('#myText3').disabled = false;
document.querySelector('#myText4').disabled = false;
}
function myFunction4() {
document.querySelector("input").disabled = true;
document.querySelector('#myText0').disabled = false;
document.querySelector('#myText1').disabled = false;
}
input{
display:block;
margin:0.85em
}
<input type="text" id="myText0" label="myText0" disabled>
<input type="text" id="myText1" label="myText1" disabled>
<input type="text" id="myText2" label="myText2" disabled>
<input type="text" id="myText3" label="myText3" disabled>
<input type="text" id="myText4" label="myText4" disabled>
<h2>
Manually Enabling text boxes
</h2>
<button onclick="myFunction1()">Disable 0,1 field</button>
<button onclick="myFunction2()">Disable Rest field other than 0,1</button>
<br/>
<h2>
Disabling All initially and then enabling the required text boxes
</h2>
<button onclick="myFunction3()">Disable 0,1 field</button>
<button onclick="myFunction4()">Disable Rest field other than 0,1</button>
I've got a total of 120 textboxes so I'm looking for a better way to do this. In my above code, the buttons under Manually Enabling text boxes are working as expected. Whereas, the other approach that I thought of under Disabling All initially and then enabling the required text boxes is not working as expected.
Also Please let me know if there is a better approach than what I've used as there are 120 textboxes and my approach is the most time-taking as I'm checking manually and my 2nd approach is saving 25% of the total time (considering 120 textboxes and the number of them to be disabled that were provided as part of my SRS).
Thanks
You can make simple common methods that will 'cascade' the logic for you rather than defining each operation repeatedly. Take a look at the attached fiddle (and its code snippet)
function myFunc1() {
enableAll();
disableTextbox('#myText0');
disableTextbox('#myText1');
}
function myFunc2() {
disableAll();
enableTextbox('#myText0');
enableTextbox('#myText1');
}
/* Common functions */
function disableAll() {
disableTextbox('#myText0');
disableTextbox('#myText1');
disableTextbox('#myText2');
disableTextbox('#myText3');
disableTextbox('#myText4');
}
function enableAll() {
enableTextbox('#myText0');
enableTextbox('#myText1');
enableTextbox('#myText2');
enableTextbox('#myText3');
enableTextbox('#myText4');
}
function disableTextbox(textboxName) {
document.querySelector(textboxName).disabled = true;
}
function enableTextbox(textboxName) {
document.querySelector(textboxName).disabled = false;
}
/* Common functions */
input{
display:block;
margin:0.85em
}
<input type="text" id="myText0" label="myText0" disabled>
<input type="text" id="myText1" label="myText1" disabled>
<input type="text" id="myText2" label="myText2" disabled>
<input type="text" id="myText3" label="myText3" disabled>
<input type="text" id="myText4" label="myText4" disabled>
<h1>Proper way to do it</h1>
<button onclick="myFunc1()">Disable 0,1 field</button>
<button onclick="myFunc2()">Disable Rest field other than 0,1</button>
you can use for, and for each "input type" or "class":
function myFunction1() {
//var inputs = document.querySelectorAll('input[type=text]'); //use this or below
var inputs = document.querySelectorAll('input[class=ttt]');
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = false; // or true
//inputs[i].style.display = 'none';
}
}
function myFunction2() {
//var inputs = document.querySelectorAll('input[type=text]'); //use this or below
var inputs = document.querySelectorAll('input[class=ttt]');
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = true; // or false
//inputs[i].style.display = 'none';
}
}
input{
display:block;
margin: 0.85em
}
<input type="text" id="myText0" class="ttt" label="myText0" disabled>
<input type="text" id="myText1" class="ttt" label="myText1" disabled>
<input type="text" id="myText2" class="ttt" label="myText2" disabled>
<input type="text" id="myText3" class="ttt" label="myText3" disabled>
<input type="text" id="myText4" class="ttt" label="myText4" disabled>
<h2>
Manually Enabling text boxes
</h2>
<button onclick="myFunction1()">enable all field</button>
<button onclick="myFunction2()">disable all field</button>
I think the best way to do this is to specify the reason for disabling in a class or even a data attribute. For simplicity let's use a class. So for example an input should be disabled because of any reason you give it a class (or data attr) with the value of the name of that reason. This will make your code very readable even without reading over the javascript files. And you will not write much of javascript at all.
That would make your elements that should be enabled together, together, and vice versa.
I would suggest this solution:
function disable(className) {
for (const element of document.getElementsByClassName(className)) {
element.disabled = true;
}
}
function enable(className) {
for (const element of document.getElementsByClassName(className)) {
element.disabled = false;
}
}
input{
display:block;
margin:0.85em
}
<input type="text" class="reason1" label="myText0" disabled>
<input type="text" class="reason1" label="myText1" disabled>
<input type="text" class="reason2" label="myText2" disabled>
<input type="text" class="reason2" label="myText3" disabled>
<input type="text" class="reason2" label="myText4" disabled>
<h2>
Manually Enabling text boxes
</h2>
<button onclick="disable('reason1'); enable('reason2')">Disable 0,1 field</button>
<button onclick="disable('reason2'); enable('reason1')">Disable Rest field other than 0,1</button>
<br />
<h2>
Disabling All initially and then enabling the required text boxes
</h2>
<button onclick="disable('reason1'); enable('reason2')">Disable 0,1 field</button>
<button onclick="enable('reason1'); disable('reason2')">Disable Rest field other than 0,1</button>

Unlocking button when the correct answer is filled in

So, I am making something where the user has to fill in their username and password in the beginning and in the end they can submit their score. I want the button to be disabled when the wrong data is filled in and to enable the button when the correct data is filled in. I cant get it to work. I have the name and password stored in the localStorage.
HTML
<button id="submit" class="register_button" type="submit" value="submit">Submit</button>
JavaScript
if (document.getElementById('name2') == localStorage.getItem('name') && document.getElementById('password2') == localStorage.getItem('password')) {
document.getElementById("submit").disabled = false;
} else {
document.getElementById("submit").disabled = true;
};
your expression is wrong you need to add .value after document.getElementById('name2') you are comparing the whole element not it's value
below is the working example
<input type="text" name="" id="name2">
<input type="text" name="" id="password2" onkeydown="validateData();">
<button id="submit" class="register_button" disabled type="submit" value="submit">Submit</button>
<script>
localStorage.setItem('name', "fazal")
localStorage.setItem('password', "pwd")
function validateData() {
//alert(document.getElementById('name2').value);
if (document.getElementById('name2').value == localStorage.getItem('name') && document.getElementById('password2').value == localStorage.getItem('password')) {
document.getElementById("submit").disabled = false;
} else {
document.getElementById("submit").disabled = true;
};
}
</script>

Buttons & checkboxes are not keeping track of each other

I need to write a function that lets you press a button only if you checked a checkbox, this is what I have written so far, it starts as false so the button gets is disabled, but when i check the checkbox it doesn't work
My code :
var gdprAccepted = false
if(gdprAccepted == true){
$('#btn-wheel-submit').prop("disabled", "false");
} else {
$('#btn-wheel-submit').prop("disabled", "true");
}
}
});
}
function gdprChecker() {
if($('#gdprCheck').is(':checked')){
gdprAccepted = true;
console.log(gdprAccepted);
} else {
gdprAccepted = false;
console.log(gdprAccepted);
}
}
You seem to be making this more complex than it needs to be:
function updateButton(checkbox) {
checkbox.form.b0.disabled = !checkbox.checked;
}
<form onsubmit="return false;">
<input type="checkbox" name="cb0" onclick="updateButton(this)"><br>
<button name="b0" disabled onclick="console.log('Enabled')">Button</button>
</form>
You just need to check your checkbox is clicked(enabled). If enable then remove the disabled attribute from button. Like following
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('buttonId');
// when unchecked or checked, run the function
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
<input type="checkbox" id="checkme"/>
<input type="submit" class="inputButton" disabled="disabled" id="buttonId" value="Button " onclick='alert("enabled")'/>
$(document).ready(function(){
$('#check').click(function(){
if($(this).prop('checked')){
$('#btn').prop('disabled', false);
}else{
$('#btn').prop('disabled', true)
}
})
})
<!-- Using Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="check"/>
<input type="submit" disabled="disabled" id="btn" value="Button" onclick='console.log("button is Enabled")' />
var cbox = document.getElementById('check');
var btn = document.getElementById('btn');
cbox .addEventListener('click',function(){
if(cbox.checked){
btn.disabled = false;
}else{
btn.disabled = true;
}
})
<!-- Using Javscript-->
<input type="checkbox" id="check"/>
<input type="submit" class="inputButton" disabled="disabled" id="btn" value="Button" onclick='console.log("button is Enabled")' />

Make a div invisible in JavaScript after confirmation

I want to make a div visible when clicking on a button. Button should ask Yes/No confirmation. Div should be visible only when user clicks on 'Yes'.
My code is here
<div id="Mydiv" style="display:none;" >Haiii</div>
<input type="button" name="answer" value="Show Div" onclick="confirm_hide(this)"/>
JavaScript
function confirm_hide(ele){
if (confirm('Do you wish to hide?')) {
ele.style.display = 'none';
document.getElementById('Mydiv').style.display = 'block';
return true;
} else return false;
}
function clicked() {
var name = document.getElementById('name').value;
if(confirm('Hello ' + name + ', great to see you!'))
{
document.getElementById('nameDiv').innerHTML = 'Hello ' + name + ', great to see you!';
document.getElementById('mainDiv').style.display = "none";
}
}
<div id="mainDiv">
<input type="text" class="form" name="name" placeholder="Your name here!" id="name"/>
<input type="button" onclick="clicked();" value="I'm ready!"/>
</div>
<br>
<div id="nameDiv"></div>
According to a similar question posted before there is no way to
change the confirm dialogs button.
I would suggest you can use bootstrap modal or jQueryUI.
There is even a workaround in the jQueryUI for this.
Or you can use bootstrap Modal. Here is the link for it
I hope my suggestions help with your problem.
You can do this
function confirm_hide(ele){
if (confirm('Do you wish to hide?')) {
ele.style.display = 'none';
document.getElementById('Mydiv').style.display = 'block';
return true;
} else {
document.getElementById('Mydiv').style.display = 'none';
return false;
}
}
You can do like this also:
function confirm_hide(ele){
if(confirm('Do you wish to hide?')){
document.getElementById('Mydiv').style.display = 'block';
document.getElementById('mainDiv').style.display = 'none';
}
}
<div id="Mydiv" style="display:none;" >Haiii</div>
<div id="mainDiv">
<input type="button" name="answer" value="Show Div" onclick="confirm_hide()"/>
</div>
HTML
<div id="Mydiv" style="display:none;" >Haiii</div>
<input type="button" name="answer" value="Show" class="confirm">
JS
var div = document.getElementById("mydiv");
var button = document.getElementsByClassName("confirm");
button.addEventListener('click',confirm_hide());
function confirm_hide(){
var hide = confirm('Do you wish to hide?');
if(hide == true){
button.style.display = 'none';
div.style.display = 'block';
}
else{
button.style.display = 'block';
div.style.display = 'none';
}
}

Evaluating form input radio button with javascript

I am setting a h2 element to display the score of questions answered via radio buttons in a form. The congratulations message pops up when the answer is correct but the h1 text changes for a millisecond and then goes back to displaying zero.
var h2 = document.querySelector("h2");
var correctAnswers = 0;
h2.textContent = correctAnswers;
function getAnswer(){
var radio = document.querySelector("form");
if (radio[0].checked === true) {
correctAnswers++;
alert("Congrats! That answer is correct!");
}
h2.textContent = correctAnswers;
}
var btn = document.getElementById('btn');
btn.addEventListener("click", getAnswer);
The HTML looks like this
<body>
<h1></h1>
<form>
<p>John Resig invented which javascript library?</p>
<input type="radio" name="library" value="jQuery">jQuery
<input type="radio" name="library" value="Lodash">Lodash
<input type="radio" name="library" value="Underscore">Underscore
<input id="btn" type="submit"> </form>
<script src="quiz.js"></script>
</body>
Your page is reloading on submit to avoid that you can use as below
form onsubmit="return false;"
<body>
<h2></h2>
<form onsubmit="return false;">
<p>John Resig invented which javascript library?</p>
<input type="radio" name="library" value="jQuery">jQuery
<input type="radio" name="library" value="Lodash">Lodash
<input type="radio" name="library" value="Underscore">Underscore
<input id="btn" type="submit"> </form>
<script>
var h2 = document.querySelector("h2");
var correctAnswers = 0;
h2.textContent = correctAnswers;
function getAnswer(){
var radio = document.querySelector("form");
if (radio[0].checked === true) {
correctAnswers++;
alert("Congrats! That answer is correct!");
}
h2.textContent = correctAnswers;
}
var btn = document.getElementById('btn');
btn.addEventListener("click", getAnswer);
</script>
</body>
When I load your code and check my browser console, I see this message:
TypeError: h2 is null
h2.textContent = correctAnswers;
That is because this line is specifying an 'h2':
var h2 = document.querySelector("h2");
You can change <h1></h1> to <h2></h2> in your html, or add <h2></h2>.
If I for example add <h2></h2>, you indeed see the changing 1 back to zero.
That is because the form does a GET request when you click the button and the page reloads.
If you don't want the page to reload after to click the button, you can for example add this to the form tag:
<form onsubmit="return false;">
Snippet:
var h2 = document.querySelector("h2");
var correctAnswers = 0;
h2.textContent = correctAnswers;
function getAnswer(){
var radio = document.querySelector("form");
if (radio[0].checked === true) {
correctAnswers++;
alert("Congrats! That answer is correct!");
}
h2.textContent = correctAnswers;
}
var btn = document.getElementById('btn');
btn.addEventListener("click", getAnswer);
<h2></h2>
<form onsubmit="return false;">
<p>John Resig invented which javascript library?</p>
<input type="radio" name="library" value="jQuery">jQuery
<input type="radio" name="library" value="Lodash">Lodash
<input type="radio" name="library" value="Underscore">Underscore
<input id="btn" type="submit"> </form>

Categories

Resources