How to check with javascript if checkbox is checked

Kr

Kronosites 01 Apr, 2018

Hello,

I'm using javacript to detect if checkbox is checked or not, but nothing is working.

If I use getElementById("").checked, doesn't work.
If I use getElementById("").checked == true, doesn't work.
If I user getElementById("").value = 1, doesn't work (because, checked or not, the value is always = 1)

What I'm doing wrong?

This is the code:

function confSubmit(form) {

 if (document.getElementById("id").checked) {

 form.submit();

 }  

 else {

 $("#notchecked").toggle('show');

 }

}

Thanks!

Gr

GreyHead 01 Apr, 2018

Hi Kronosites ,

I'm not quite clear what you need to do here - I think you are trying to show/hide a form element when the checkbox changes. If so then you can do this using the Events tab of the checkbox element.

If you are trying to stop form submission if the checkbox isn't checked then you can do that by making the Checkbox element required on the Validation tab.

I'm not sure about your JavaScript itself - it looks as if it should be OK. How are you calling the function.

Bob

Kr

Kronosites 02 Apr, 2018

Hello GreyHead,

What I'm trying to do is to give the users a special button that check if all variables are fullfilled or not (according to specific conditions)
I have onClick event that calls the function.

The function check each variable 1 by 1 (each input field), and if specific conditions are OK, the form is submitted ("if" statement of my javascript code).
If not, another div appears ("else" statement of my javascript code).

Using this code with simple text inputs (free text, date, etc.) all works fine.

But I cannot check a checbox input doing "if (document.getElementById("id").value == 1", because checked or not value is always = 1.
Neither can do "if (document.getElementById("id").checked) { do something }". I try it and it doesn't work.

Asking on StackOverflow my code must work, but something must be different inside Chronoforms on checkboxes.

Hope you can help me.
Thanks.

Gr

GreyHead 02 Apr, 2018

Answer

1 Likes

Hi Kronosites,

This works - set to show/hide a couple of divs

jQuery(document).ready(function(jQ){
  jQ('#checkbox1').click( function() {
    if ( jQ('#checkbox1').prop('checked') ) {
      jQ('#checked').show();
      jQ('#not_checked').hide()
    } else {
      jQ('#checked').hide();
      jQ('#not_checked').show();
    }
  });
});

It might be simpler to do your validation using CFv5's Custom validation functions and/or the Events tabs.

Bob

Kr

Kronosites 02 Apr, 2018

Many thanks GreyHead! You rules!

Above I let my code using javascript & your JQuery, thanks for all!

>> Example:
You have a form with a text field and a check box. If user click on the checkbox it means that the text field is "unknowded".
Both inputs are required in Chronoforms, but if the user clic on a button we want to show a div with an advertisment.
Here is the working code:

function confSubmit(form) {
  jQuery(document).ready(function(jQ) {
    if ( (jQ('#checkbox').prop('checked') || document.getElementById("textfield").value != "" )) {
      form.submit();
    } else {
      $("#empty").toggle('show');
      location.hash = "#empty";
    }
  });
}

Forums

How to check with javascript if checkbox is checked