Disabling/Enabling a button as per a checkbox

Disabling/Enabling a button as per a checkbox - javascript

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.

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?
It has a syntax error.
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.
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>

<!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.

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!

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);
}
});

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
});

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);} // <--
}
});

Related

i could't disable submit button on contact form

I've tried all that recommended here to similar posters but nothing has working.
please let me know, what I'm doing wrong?
here is the simple code from one of the examples, and works fine when I've tried on jsfiddle, but once i run it on my web page...the button is disable but javascript shows mistake 21(Uncaught ReferenceError: $ is not defined) here is the original link
<form>
Username<br />
<input type="text" id="user_input" name="username" /><br />
Password<br />
<input type="text" id="pass_input" name="password" /><br />
Confirm Password<br />
<input type="text" id="v_pass_input" name="v_password" /><br />
Email<br />
<input type="text" id="email" name="email" /><br />
<input type="submit" id="register" disabled value="Register" />
</form>
<div id="test">
</div>
<script>$('#user_input, #pass_input, #v_pass_input, #email').bind('keyup', function() {
if(allFilled()) $('#register').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}</script>

You need to include jquery($) in your code.
Easiest way is to include the below line before your script tag where allFilled() logic resides. You can also place it in the <head> tag. But make sure any code which makes use of $ (jquery) remain after the including jquery.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
$('#user_input, #pass_input, #v_pass_input, #email').bind('keyup', function() {
if (allFilled()) $('#register').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if ($(this).val() == '') filled = false;
});
return filled;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
Username<br />
<input type="text" id="user_input" name="username" /><br /> Password
<br />
<input type="text" id="pass_input" name="password" /><br /> Confirm Password<br />
<input type="text" id="v_pass_input" name="v_password" /><br /> Email
<br />
<input type="text" id="email" name="email" /><br />
<input type="submit" id="register" disabled value="Register" />
</form>
<div id="test">
</div>

How to change button value once all required field is filled

I'm trying to change the value of the submit button, only after required fields are filled. but as per my below code the value is changing even the required fields are not filled, additionally I'm need advice on how to mark at least one checkbox field as required.
$('#formSubmit').click(function(){
$(this).val("Processing");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label>Call Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="CAll Me">
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="Email Me">
</label>
<br />
<hr />
<input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
<br />
<input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
<br />
<input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
<br />
<input type="submit" id="formSubmit" value="Submit" />
</form>

You can listen to submit event instead:
$(document).ready(function(e) {
$('#myForm').on('submit', function(e){
e.preventDefault();
$('#formSubmit').val("Processing");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form id="myForm">
<label>Call Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="CAll Me">
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="Email Me">
</label>
<br />
<hr />
<input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
<br />
<input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
<br />
<input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
<br />
<input type="submit" id="formSubmit" value="Submit" />
</form>
</body>

$(document).ready(function(e) {
function validateForm() {
var isValid = true;
$('input[required]').each(function() {
if ( $(this).val() === '' ){
isValid = false;
}
});
return isValid;
}
$('#formSubmit').click(function(){
if(validateForm()) {
$(this).val("Processing");
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form>
<label>Call Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="CAll Me">
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="Email Me">
</label>
<br />
<hr />
<input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
<br />
<input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
<br />
<input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
<br />
<input type="submit" id="formSubmit" value="Submit" />
</form>
</body>

I'm adding my solution since nobody seems to answer the second part of the question. You need to modify your markup a little as done below in the answer.
function makeChecks() {
checkBoxes = $("input:checked"); //Find checked checkboxes
if (checkBoxes.length) { //Only submit if some checked checkbox(es) exist
$('#exampleForm').find('input').each(function() {
if ($(this).prop('required') && $(this).val() !== "") {
$("#formSubmit").val("Processing");
}
});
}
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form id="exampleForm">
<label>Call Me
<input type="checkbox" name="contactMethod[]"
id="contactMethod[]" value="CAll Me">
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]"
id="contactMethod[]" value="Email Me">
</label>
<br />
<hr />
<input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
<br />
<input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
<br />
<input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
<br />
<input type="submit" id="formSubmit" onclick="makeChecks()" value="Submit" />
</form>
</body>

Id must be unique. Unique id must be assigned to each checkbox. Add required attribute to the checkbox controls.
<label>Call Me
<input type="checkbox" name="contactMethod[]" id="callMe" value="CAll Me" required>
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]" id="emailMe" value="Email Me" required>
</label>
You can use $(elem).val() != '' to check if a input element has been entered.
For checkbox, you can use $(elem).prop('checked') to check if a checkbox has been checked.
$(document).ready(function(e) {
$('#formSubmit').click(function(e){
if((!$('#callMe').prop('checked') || !$('#emailMe').prop('checked')) && $('#formName').val() != '' && $('#formEmail').val() != '' && $('#formMobile').val() != '')
$(this).val("Processing");
});
});
https://jsfiddle.net/snehansh/nwh0vct8/3/

How to disable a button at an empty text/number field

I wish to disable a button in HTML on the condition that required fields are empty. The code given below is of the form in which the button is there:
<form>
Name*: <input type="text" size="20" name="name" /> <br /><br /> Surname: <input type="text" size="20" name="sur_name" /> <br />
<br /><br /> Mobile number: <input type="tel" size="15" name="mob" /> <br /><br /> E-mail id*: <input type="Email" size="30" name="user_id" /> <br /><br /> Password*: <input type="Password" size="30" name="pw1" /> <br /><br /> Confirm Password*: <input
type="password" size="30" name="pw2" /> <br /><br /><br /><br /> I accept the terms and conditions <input type="checkbox" name="t&c" /><br /><br />
<input type="submit" class="btn btn-lg btn-primary" value="Sign up now" onclick=window.location.href="https://www.google.co.in/signup" />
</form>
The form is actually a dummy sign up screen, yet the screen redirected is a 404 error screen, but I want the button to be disabled if certain fields are empty, and that it reloads the page if the two values for password are different.
I don't know JS completely, so please edit the code so that the parameters are clear.

Replace <input type="text" size="20" name="name" /> with <input type="text" size="20" name="name" required/>
Replace <input type="Email" size="30" name="user_id" /> with <input type="Email" size="30" name="user_id" required/>
Replace <input type="Password" size="30" name="pw1" /> with <input type="Password" size="30" name="pw1" required/>
Replace <input type="password" size="30" name="pw2" /> with <input type="password" size="30" name="pw2" required/>

Calling a Object Oriented function from jQuery

I am kind of new to JQuery and Javascript and need your help on what I am missing here. I know the code works in jsfiddle.net but when I actually run it on my computer it's not doing anything. I want to keep the Object Oriented functions in "updated-formcheck.js" file separately.
I have a form validation HTML file with a jQuery function that calls my "updated-formcheck.js" file that checks all the empty fields and returns a msg. But when a submit button is clicked, nothing happens. Can you tell me why?
HTML file:
<script src="updated-formcheck.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<form id="myform" method="post" action="#">
<fieldset>
<label for="attendee">I am a...<font color="red">*</font>:<br />
<br />
</label>
<select id="attendee" name="attendee" >
<option value="">-- Please Choose --</option>
<option value="RETURNING" >Returning Attendee</option>
<option value="FIRST_TIME" >First Time Attendee</option>
</select>
<label for="fullName"><br />
<br />
Full Name<font color="red">*</font>:</label>
<p><input type="text" id="fullName" name="fullName" value="" />
</p>
<p> </p>
<label for="address1">Street Address<font color="red">*</font>:</label>
<p>
<input type="text" id="address1" name="address1" value=""/>
</p>
<p>
<input type="text" id="address2" name="address2" value="" />
</p>
<label for="city"><br />
City<font color="red">*</font>:</label>
<p>
<input type="text" id="city" name="city" value="" />
</p>
<label for="stateProvince"><br />
State/County/Province:</label>
<p>
<input type="text" id="stateProvince" name="stateProvince" value="" />
</p>
<label for="zipPostalCode">ZIP/Postal Code:<br />
</label>
<p>
<input type="text" id="zipPostalCode" name="zipPostalCode" value="" />
</p>
<input type="hidden" name="submitted" value="true" />
<input type="submit" value="Submit" id="btnSubmit"/>
</fieldset>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#btnSubmit').click(function(e) {
validateNow(e);
});
});
</script>
In "updated-formcheck.js" file:
function validateNow(eventObj){
var isValid = true;
$('input[type="text"].required, textarea.required, select.required').each(function() {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
else {
$(this).css({
"border": "",
"background": ""
});
}
});
if (isValid == false) {
eventObj.preventDefault();
alert(this.e);
}else
this.s;
}

Because
$('input[type="text"].required, textarea.required, select.required')
in your code currently return an empty array, so each function is not called.
This is because you are looking for dom elements with a css class "required" that you doesn't have.

To get your code working I added a "required" class, which your js code is looking for, on the city element. I also updated the jQuery bind event to the form submit instead of a button click.
<html>
<head>
</head>
<body>
<form id="myform" method="post" action="#">
<fieldset>
<label for="attendee">I am a...<font color="red">*</font>:<br />
<br />
</label>
<select id="attendee" name="attendee" >
<option value="">-- Please Choose --</option>
<option value="RETURNING" >Returning Attendee</option>
<option value="FIRST_TIME" >First Time Attendee</option>
</select>
<label for="fullName"><br />
<br />
Full Name<font color="red">*</font>:</label>
<p><input type="text" id="fullName" name="fullName" value="" />
</p>
<p> </p>
<label for="address1">Street Address<font color="red">*</font>:</label>
<p>
<input type="text" id="address1" name="address1" value=""/>
</p>
<p>
<input type="text" id="address2" name="address2" value="" />
</p>
<label for="city"><br />
City<font color="red">*</font>:</label>
<p>
<input type="text" id="city" name="city" value="" class="required" />
</p>
<label for="stateProvince"><br />
State/County/Province:</label>
<p>
<input type="text" id="stateProvince" name="stateProvince" value="" />
</p>
<label for="zipPostalCode">ZIP/Postal Code:<br />
</label>
<p>
<input type="text" id="zipPostalCode" name="zipPostalCode" value="" />
</p>
<input type="hidden" name="submitted" value="true" />
<input type="submit" value="Submit" id="btnSubmit"/>
</fieldset>
</form>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="updated-formcheck.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myform').on('submit', function(e) {
//e.preventDefault();
validateNow(e);
return false;
});
});
</script>
</body>
</html>

JavaScript validator with 2 submit buttons

I'm using a JavaScript validator from http://www.javascript-coder.com/html-form/javascript-form-validation.phtml. The problem I'm facing is that I have one button that saves the registration (here I need to check for name and last name) and the second button which checks the entire form. However, if I press any button, it checks the entire form.
<form id="ministerial" name="register" action="" method="post">
<label>Title: </label>
<input type="text" name="title" value="" />
<label>First Name: </label>
<input type="text" name="first_name" value="" />
<label>Last Name: </label>
<input type="text" name="last_name" value="" />
<label>Organization: </label>
<input type="text" name="organization" value="" />
...
<input type="submit" name="save" value="SAVE REGISTRATION" />
<input type="submit" name="submit" value="SUBMIT REGISTRATION" />
</form>
<script type="text/javascript">
var frmvalidator = new Validator("ministerial");
frmvalidator.addValidation("title","req","Please enter a title");
frmvalidator.addValidation("first_name","req","Please enter the first name");
frmvalidator.addValidation("last_name","req","Please enter the last name");
frmvalidator.addValidation("organization","req","Please enter the organization");
</script>

Maybe this will work. Add validation for proper input fields onClick:
<form id="ministerial" name="register" action="" method="post">
<label>Title: </label>
<input type="text" name="title" value="" />
<label>First Name: </label>
<input type="text" name="first_name" value="" />
<label>Last Name: </label>
<input type="text" name="last_name" value="" />
<label>Organization: </label>
<input type="text" name="organization" value="" />
...
<input type="submit" name="save" value="SAVE REGISTRATION" onclick="return btnSave_click();" />
<input type="submit" name="submit" value="SUBMIT REGISTRATION" onclick="return btnRegister_click();" />
</form>
<script type="text/javascript">
var frmvalidator = new Validator("ministerial");
function btnSave_click(){
frmvalidator.clearAllValidations();
frmvalidator.addValidation("first_name","req","Please enter the first name");
frmvalidator.addValidation("last_name","req","Please enter the last name");
return true;
}
function btnRegister_click(){
frmvalidator.clearAllValidations();
frmvalidator.addValidation("title","req","Please enter a title");
frmvalidator.addValidation("organization","req","Please enter the organization");
return true;
}
</script>

I guess you will need to write a custom validation function

We Keep Coding

JavaScript is the programming language of the Web.

Disabling/Enabling a button as per a checkbox - javascript

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!

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); } });

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 });

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);} // <-- } });

Related

i could't disable submit button on contact form

How to change button value once all required field is filled

How to disable a button at an empty text/number field

Calling a Object Oriented function from jQuery

JavaScript validator with 2 submit buttons

Categories

Resources