CODEWITHSUNDEEP
javascriptvalidationcheckbox
user1332075
user1332075

Reputation: 73

checkbox javascript

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>

Upvotes: 1

Views: 5320

Answers (4)

Stephen Nelson
Stephen Nelson

Reputation: 939

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>

Upvotes: 0

Shashank Kadne
Shashank Kadne

Reputation: 8101

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>

Upvotes: 1

Kevin Bowersox
Kevin Bowersox

Reputation: 94459

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/

Upvotes: 0

Okan Kocyigit
Okan Kocyigit

Reputation: 13421

<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/

Upvotes: 0

Related Questions