samedi 2 septembre 2017

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 pw1 = document.getElementById('pw1').value;
    var pw2 = document.getElementById('pw2').value;

    if (pw1 == pw2){
        document.getElementById('btn').onclick = window.location.href("http://ift.tt/2gzJRn2");
    } else {
        document.getElementById('btn').onclick = window.alert("Please make sure that both the password fields have the same text");
    }
}

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().




Aucun commentaire:

Enregistrer un commentaire