checkbox javascript

Question

There is two choices; english or nonenglish. When you don't choose any of them or chose both of them, it is supposed to give error but it doesn't give. Could you please help?Thank you. ps: Even though I make it one checkbox for terms and conditions, alert doesn't work.

JavaScript

function onFormSubmit(form_element) {

        if (form_element.click.checked == false)
                {
                alert("Please check language");
                return false;
                }
    return true;
}

HTML

<form onsubmit="return onFormSubmit(this)">
        Language: <input type="checkbox" name="click" value="english">english
</form>

Have you considered using a radio input instead? That way only one can be chosen, and the browser should default to checking one by default. — David Thomas
– David Thomas, Commented Apr 15, 2012 at 14:05
Yes I know it is easier but it is supposed to be checkbox. :( — user1332075
– user1332075, Commented Apr 15, 2012 at 14:08
"Supposed to be" why? For this use-case it really should be radio input. — David Thomas
– David Thomas, Commented Apr 15, 2012 at 14:41
In this scenario, radio button should be the choice, not a checkbox. The reason why radio buttons and checkboxes are separated is because of cases like this, where a default option has to be selected, and only one option can be selected at once. You can of course, style your radio button in anyway you desire (even mimic the look of a checkbox, but that would be counterintuitive, no?) — Terry
– Terry, Commented Oct 9, 2013 at 18:10

Shashank Kadne · Accepted Answer · 2012-04-15 14:30:24Z

1

Condition should be...

if ((form_element.click_1.checked == true && form_element.click_2.checked == true) || (form_element.click_1.checked == false && form_element.click_2.checked == false))

Edit

This is what I used.

<script>
function onFormSubmit(form_element) {

        if ((form_element.click_1.checked == true && form_element.click_2.checked == true) || (form_element.click_1.checked == false && form_element.click_2.checked == false))
                {
                alert("Please check language");
                return false;
                }
    return true;
}
</script>


<form onsubmit="return onFormSubmit(this)">
        Language: <input type="checkbox" name="click_1" value="english">english
                  <input type="checkbox" name="click_2" value="non english">non english</p>
<input type="submit">
</form>

edited Apr 15, 2012 at 14:30

answered Apr 15, 2012 at 14:10

Shashank Kadne

8,1017 gold badges43 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1332075 Over a year ago

It didn't solve the problem. When I choose both or none of them, it still doesn't give any error.

Shashank Kadne Over a year ago

When I used this condition, it did show me the alert message for both these conditions...

user1332075 Over a year ago

it doesnt show me any alert. How can I write it any other way?

Okan Kocyigit · Accepted Answer · 2012-04-15 14:22:51Z

0

<form onsubmit="return onFormSubmit(this)">
        Language: <input type="checkbox" name="click_1" value="english">english
                  <input type="checkbox" name="click_2" value="non english">non english</p>
        <input type="submit" />
</form>
<script type="text/javascript">
function onFormSubmit(form_element) {
  if ((form_element.click_1.checked == true && form_element.click_2.checked == true)) {
      alert("Please check only one choice!");
      return false;
  } else if ((form_element.click_1.checked == false && form_element.click_2.checked == false)) {
      alert("Please check your choice!");
      return false;
    }
    return true;
}
</script>

http://jsfiddle.net/ocanal/3AWUp/

answered Apr 15, 2012 at 14:22

Okan Kocyigit

13.5k18 gold badges74 silver badges132 bronze badges

Comments

Kevin Bowersox · Accepted Answer · 2012-04-15 14:23:32Z

0

I added a submit button to your HTML and ids on each element

HTML

<form id="myForm">
        Language: <input id="english" type="checkbox" name="click_1" value="english">english
                  <input id="nonEnglish" type="checkbox" name="click_2" value="non english">non english</p>
<button type="submit">Submit</button>
</form>

I attach a function to the onsubmit event the performs validation. Javascript

document.getElementById("myForm").onsubmit =
function () {
        if ((document.getElementById("english").checked == false && document.getElementById("nonEnglish").checked == false) || (document.getElementById("english").checked == true && document.getElementById("nonEnglish").checked == true))
                {
                alert("Please check language");
                return false;
                }
    return true;
}

Demo: http://jsfiddle.net/j3J4E/

answered Apr 15, 2012 at 14:23

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

1 Comment

user1332075 Over a year ago

Thank you but I have to use the original function.

Stephen Nelson · Accepted Answer · 2012-04-15 14:41:44Z

0

The problem is "onFormSubmit(this)" -- 'this' will not refer to the form when the event is called. If you look up the form from the document instead it will work fine.

<!doctype html>
<html>
<head>
<script type="text/javascript">
function validateForm() {
        var form = document.getElementById("myForm");
        if (!form.language.checked) {
                alert("Please check language");
                return false;
        }
        return true;
}
</script>
</head>
<body>
<form id="myForm" onsubmit="return validateForm()">
        Language: <input type="checkbox" name="language">English</input><br />
        <input type="submit" />
</form>
</body>
</html>

edited Apr 15, 2012 at 14:41

answered Apr 15, 2012 at 14:20

Stephen Nelson

9391 gold badge7 silver badges22 bronze badges

4 Comments

Stephen Nelson Over a year ago

Are you sure you want check boxes? Radio buttons would be better as only one can be selected at a time.

user1332075 Over a year ago

I changed it as terms of conditions and I need checkbox

Stephen Nelson Over a year ago

The reason your function doesn't work is because you're calling it wrong. If you can't change the function change the form: <form id="myForm" onsubmit="return onFormSubmit(document.getElementById('myForm'))">...

Stephen Nelson Over a year ago

Edited to show a working example. Tested in chrome and it works.

Collectives™ on Stack Overflow

checkbox javascript

4 Answers 4

3 Comments

Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related