CODEWITHSUNDEEP
javascript
sarah
sarah

Reputation: 87

Fix button to stay disable until user checks a checkbox as well

<form action="add.php" method="post" onsubmit="return ValidationEvent()">
    <input type="email" placeholder="Email" class="js-email" name="email" value="<?=formDisplay(getSessionValue("er_email"))?>" required>
    <input type="text" placeholder="Zip Code" class="js-zip" name="zip" value="<?=formDisplay(getSessionValue("er_zip"))?>" required>
    <input type="text" placeholder="First Name" class="js-name" name="firstname" value="<?=formDisplay(getSessionValue("er_first"))?>" required>
    <input type="text" placeholder="Last Name" class="js-lname" name="lastname" value="<?=formDisplay(getSessionValue("er_last"))?>" required>
    <input type="password" id="password" placeholder="Password" class="js-pass" name="password" required>
    <input type="password" id="confirm" placeholder="Confirm Password" class="js-pass" name="confirm" required>
    <span class="textLeft flex alignCenter terms">
        <input type="checkbox" name="terms" value="yes" required>
        <span>
            <span>I agree</span>
        </span>
    </span>
    <span class="textLeft flex alignCenter terms">
        <input type="checkbox" name="term" value="yes">
        <span>
            <span>Keep me posted</span>
        </span>
    </span>
    <center>
        <input class="disabled white cbtn1 c1" type="submit" id="submit-btn" value="START MY ORDER" disabled>
    </center>
    <?php 
    unset($_SESSION['er_email']);
    unset($_SESSION['er_zip']);
    unset($_SESSION['er_first']);
    unset($_SESSION['er_last']);
    ?>
</form>

Javascript:

(function() {
    $('form > input').keyup(function() {

        var empty = false;
        $('form > input').each(function() {
            if ($(this).val() == '') {

                empty = true; 
            }
        });

        if (empty) {
            $('#submit-btn').attr('disabled', 'disabled').addClass('disabled').removeClass('orangeBtn');
        } else {
            $('#submit-btn').removeAttr('disabled').removeClass('disabled').addClass('orangeBtn');;
        }
    });
})()

As you can see from the image, the button gets enabled once you enter all the input fields, I tried with my javascript above for it to also be display until I check "I agree", even if the "keep me posted" was unchecked, but for some reason the it gets enabled before the user clicks "I agree" , how can I fix this? enter image description here

enter image description here

Upvotes: 0

Views: 52

Answers (3)

Jurij Jazdanov
Jurij Jazdanov

Reputation: 1258

if empty or checkbox not checked keep it disabled.

if (empty || !$('input[name="terms"]').is(':checked')) {
    $('#submit-btn').attr('disabled', 'disabled').addClass('disabled').removeClass('orangeBtn');
} else {
    $('#submit-btn').removeAttr('disabled').removeClass('disabled').addClass('orangeBtn');;
}

You are checking if inputs have values. the checkbox has a value "Yes" so it validates as true.

Upvotes: 1

Shubham
Shubham

Reputation: 1793

This is simple example of how to enable and disable a button. This might help you implement your logic.

$("#testCheckBox").click(function(){
  if(this.checked) {
    $("#testBtn").removeAttr("disabled");
  } else {
    $("#testBtn").prop("disabled", true);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="checkbox" id="testCheckBox">
<button id="testBtn" disabled="true">Click It</button>

Upvotes: 0

Naqash Malik
Naqash Malik

Reputation: 1816

this is because you have skipped if checkbox is checked or not, so you have to add that check too:

var checkbox = $('form > input[type=checkbox]:checked').length; 
 $('form > input').each(function() {
            if ($(this).val() == '' && checkbox == 0 ) {

                empty = true; 
            }
        });

Upvotes: 0

Related Questions