Javascript - how to check for 2 conditions on form

Question

We have a form where users can leave an opinion anonymously, but if they want to leave their email address for a follow up they can. If they choose to leave their email, we want them to check the box that they read our privacy policy. If they choose not to leave an email address they don't need to check the box.

Here is the Javascript code on the form page. It doesn't work with both conditions, I can only get it to work if the box is checked:

<script type="text/javascript">

$(document).ready(function(){
    $("#form").submit(function(event){
           if (!$("input[type='checkbox']").attr("checked")){
             if ($("input[name$='Mail']").val() !== "") {
             alert("内容に同意ください。");
             event.preventDefault();
         }
        }
    });
});
</script>

Thank you

Answer 1

There is no .value property in jQuery object. Instead use .val() and use equality operators rather than assignment operators.

if (!$("input[name$='Mail']").val() === "") {

Answer 2

Your condition seems to be that if there is something in the e–mail field, then the checkbox must be checked. Presumably the form controls all have names (otherwise they aren't going to be successful) so the validation function can be really simple:

$("#form").submit(function(){

       // If there's something in the email fiend and the checkbox isn't checked
       // show the message
       if (this.emailControlName.value != '' && !this.checkboxName.checked) {
        alert("内容に同意ください。");
        return false;
      }
    }
});

The following "works" exactly as you require:

<script>

$(document).ready(function(){
    $("#form").submit(function(){
      if (this.email.value != '' && !this.readAgreement.checked){
        alert("内容に同意ください。");
        return false;
      }
    });
});
</script>

<form id="form">
  email:<textarea name="email"></textarea><br>
  read agreement:<input type="checkbox" name="readAgreement" value="yes"><br>
  <input type="submit">
</form>

Note that where you have:

if (!$("input[type='checkbox']").attr("checked")){

that checks the checked attribute , not the checked property. For the current version of jQuery (1.11), if the input doesn't have the checked attribute, ie is like the one in the form above, then ...attr('checked') will return undefined and the expression resolves to false , even if the user checks the input.

Up to version 1.7 at least, jQuery confused attributes and properties and the attr method returned the checked property, not the attribute.

Answer 3

You want this:

if (!$("input[name$='Mail']").value = "") {

To be something like this instead:

if ($("input[name$='Mail']").val() !== "") {

Your version is assigning "" to the value; since "" evaluates as false , that if condition will never be true.

Answer 4

You can use ".is(":checked")" to check the state of check box as follows:

<script type="text/javascript">

$(document).ready(function(){
$("#form").submit(function(event){
       if ($("input[type='checkbox']").is(":checked")){
         if ($("input[name$='Mail']").val() !== "") {
         alert("内容に同意ください。");
         event.preventDefault();
     }
    }
});
});
</script>

If you want to check the checkbox only if mail is not empty then you will have to:

<script type="text/javascript">

$(document).ready(function(){
$("#form").submit(function(event){
       if ($("input[name$='Mail']").val() !== "") {
         if ($("input[type='checkbox']").is(":checked")){
         alert("内容に同意ください。");
         event.preventDefault();
     }
    }
});
});
</script>