CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Darsh K
Darsh K

Reputation: 41

Disabling/Enabling a button as per a checkbox

I have been trying to make a form in which as and when a checkbox is checked, the button is enabled. I tried jquery and javascript, but they are not helping.

HTML code of form:

<form>
    Name*: <input type="text" size="20" name="name" required /> <br /><br />
    Surname: <input type="text" size="20" /> <br />
    <br /><br />
    Mobile number: <input type="tel" size="15" /> <br /><br />
    E-mail id*: <input type="Email" size="30" name="usr_id" required /> <br /><br />
    Password*: <input type="Password" size="30" id="pw1" required /> <br /><br />
    Confirm Password*: <input type="password" size="30" id="pw2" required /> <br /><br /><br /><br />
    I accept the terms and conditions <input class="chk" type="checkbox" id="tc" /><br /><br />
    <input type="submit" id="btn" class="btn btn-lg btn-primary" value="Sign up" onclick="form_function()"/>
</form>

Javascript-form_function:

function form_function(){
        var pw = document.getElementById(pw1).value;
        var conf_pw = document.getElementById(pw2).value;

        if (pw == conf_pw){
            window.location.href('http://www.google.com/sgn_up_conf');
        } else{ 
            if (conf_pw == ""){
                window.alert("Please confirm your password");
            } else {
                if (pw == conf_pw == ""){
                    window.alert("Please enter a password");
                } else {
                    if (pw == "") {
                        window.alert("How can you confirm a password if you have not written anything?");
                    } else {
                        window.alert("Please make sure that you have confirmed the password properly");
                    }
                }
            }
        }
    };

Javascript to conditionally disable button:

$('#btn').prop("disabled", true);
$('#tc').click(function() {
    if ($(this).is(':checked')) {
        $('#btn').prop("disabled", false);
    } else {
        $('#btn').attr('disabled',true);}
    }
});

form_function() is working fine, but the checkbox-button relation is not working out. Even when the checkbox is not checked, the button is in enabled state, and caries out form_function().

*In this new edit, I have put up the updated form_function(), this time, I have included all possibilities of the two password fields.

Upvotes: 1

Views: 767

Answers (6)

Nikita V
Nikita V

Reputation: 437

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <form>
    Name*: <input type="text" size="20" name="name" required /> <br /><br />
    Surname: <input type="text" size="20" /> <br />
    <br /><br />
    Mobile number: <input type="tel" size="15" /> <br /><br />
    E-mail id*: <input type="Email" size="30" name="usr_id" required /> <br /><br />
    Password*: <input type="Password" size="30" id="pw1" required /> <br /><br />
    Confirm Password*: <input type="password" size="30" id="pw2" required /> <br /><br /><br /><br />
    I accept the terms and conditions <input class="chk" type="checkbox" id="tc" /><br /><br />
    <input type="submit" id="btn" class="btn btn-lg btn-primary" value="Sign up" disabled="disabled" onclick="form_function()"/>
</form>
</body>
    <script>
        function form_function(){

        var pw1 = document.getElementById('pw1').value;
        var pw2 = document.getElementById('pw2').value;

        if (pw1 == pw2){
            document.getElementById('btn').onclick = window.location.href("www.google.co.in/sgn_conf");
        } else {
            document.getElementById('btn').onclick = window.alert("Please make sure that both the password fields have the same text");
        }
        }

        $("#tc").change(function () {
            if (this.checked) {
                $("#btn").prop("disabled", false);
            }
            else {
                $("#btn").prop("disabled", true);
            }
        });
    </script>
</html>

Check the snippet.

Upvotes: 2

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

I would suggest you adjust your code to use a simpler set. I changed your markup to a bit more conventional, not specifically required, I removed all the <br /> and used CSS to space stuff out.

As to why your code did not work?

  1. It has a syntax error.
  2. Using the CLICK event, on the first click it gets checked which is OK however if you use the keyboard to check/un-check, it does not fire thus you should use the change event to ensure actions that can change it are accounted for.
  3. You have an issue with the href and that odd event hooking, you really want to set it instead. window.location.href = "www.google.co.in/sgn_conf";

$('#btn').on('click', function() {
  if ($('#pw1').val() == $('#pw2').val()) {
    window.location.href = "www.google.co.in/sgn_conf";
  } else {
    window.alert("Please make sure that both the password fields have the same text");
  }
}).prop("disabled", true);
$('#tc').on('change', function() {
  $('#btn').prop("disabled", !this.checked);
});
form div {
  margin-bottom: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <div>
    <label> Name*:
      <input type="text" size="20" name="name" required />
    </label>
  </div>
  <div>
    <label>Surname:
      <input type="text" size="20" />
    </label>
  </div>
  <div>
    <label>Mobile number:
      <input type="tel" size="15" />
    </label>
  </div>
  <div>
    <label>E-mail id*:
      <input type="Email" size="30" name="usr_id" required />
    </label>
  </div>
  <div>
    <label>Password*:
      <input type="Password" size="30" id="pw1" required />
    </label>
  </div>
  <div>
    <label>Confirm Password*:
      <input type="password" size="30" id="pw2" required />
    </label>
  </div>
  <div>
    <label>I accept the terms and conditions
      <input class="chk" type="checkbox" id="tc" />
    </label>
  </div>
  <div>
    <input type="submit" id="btn" class="btn btn-lg btn-primary" value="Sign up" />
  </div>

</form>

Upvotes: 2

Oliver Ni
Oliver Ni

Reputation: 2664

You have an extra ending bracket.

$('#btn').prop("disabled", true);
$('#tc').click(function() {
    if ($(this).is(':checked')) {
        $('#btn').prop("disabled", false);
    } else {
        $('#btn').attr('disabled',true);} // <--
    }
});

Upvotes: 0

Sujithrao
Sujithrao

Reputation: 785

Try this 

$("#btn").prop('disabled', true);//disable
$('#tc').click(function() {
        if($(this).is(':checked'))
           $("#btn").prop('disabled', true);//enable
        else
            $("#btn").prop('disabled', true);//disable
    });

Upvotes: 0

adda82
adda82

Reputation: 175

You had on extra '}' 

$('#btn').prop("disabled", true);
    $('#tc').on('click',function() {
        if ($(this).is(':checked')) {
            $('#btn').prop("disabled", false);
        } else {
            $('#btn').attr('disabled',true);
        }
    });

Upvotes: 0

Niles Tanner
Niles Tanner

Reputation: 4021

Could it be that you have a extra }?

         ...
            $('#btn').attr('disabled',true);}
        }
    ); // < --- remove }

Check this working example:

https://codepen.io/nilestanner/pen/wqOaaO

I recommend that you use a IDE that has linting or error checking and this sort of issue will be easier to debug!

Upvotes: 1

Related Questions