i could't disable submit button on contact form - javascript

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>

Related

How to get the form with input type password from a page with multiple forms using Javascript DOM?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Form.html</title>
<style type="text/css">
body {
margin: 30px;
}
</style>
</head>
<body>
<form id="form1">
<div id="fullnameIDdiv">
Full Name: <input type="text" name="fullname" /><br />
</div>
<div id="usernameIDdiv">
Username: <input type="text" name="username" /><br />
</div>
Password: <input type="password" name="password" /><br />
<input type="submit" value="Submit" />
</form>
<form id="form2">
<div id="firstName">
Full Name: <input type="text" name="fname" /><br />
</div>
<div id="lastName">
Username: <input type="text" name="lname" /><br />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>
For Example,
In this page there are two forms. I want to get the form that has the input type = password. I don't want to get the form using its ID(getElementById) because I want to get a more general solution for getting the form, with input type = password out of multiple forms.
I have looked into document.forms.elements but I am not able to get to the solution. Please help.
Edit:
In this I have given a sample html code but my question is rather general. The answers given before this edit have used .parentNode() to get the parent node of the input tag. But if the input is under the tags such as <span> or <section> then the .parentNode() would not give the <form> tag. Keeping that in mind, how to get the form tag with input type = password from a page with multiple forms using Javascript DOM?
As your HTML stands now, you can try using querySelector() and parentNode like the following way:
var passForm = document.querySelector('input[type=password]').parentNode;
console.log(passForm);
<form id="form1">
<div id="fullnameIDdiv">
Full Name: <input type="text" name="fullname" /><br />
</div>
<div id="usernameIDdiv">
Username: <input type="text" name="username" /><br />
</div>
Password: <input type="password" name="password" /><br />
<input type="submit" value="Submit" />
</form>
<form id="form2">
<div id="firstName">
Full Name: <input type="text" name="fname" /><br />
</div>
<div id="lastName">
Username: <input type="text" name="lname" /><br />
</div>
<input type="submit" value="Submit" />
</form>
The easiest way to do this is with jQuery.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form id="form1">
<div id="fullnameIDdiv">
Full Name: <input type="text" name="fullname" /><br />
</div>
<div id="usernameIDdiv">
Username: <input type="text" name="username" /><br />
</div>
Password: <input type="password" name="password" /><br />
<input type="submit" value="Submit" />
</form>
<form id="form2">
<div id="firstName">
Full Name: <input type="text" name="fname" /><br />
</div>
<div id="lastName">
Username: <input type="text" name="lname" /><br />
</div>
<input type="submit" value="Submit" />
</form>
<script>
$("form>input[type='password']").parent();
</script>
</body>

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/

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

How to make a button disable/enable on click?

I have html which is something like, not exactly like this, but just to give you an idea.
<input type="text" disabled="disabled" name="ip" />
<input type="text" name="name" />
<input type="text" name="email" />
<input type="submit" value="send" />
the IP field is disabled, I want to put a button right next to it, which will enable the field without refreshing the page.
Can you please help me do this?
Thanks in advance
<input type="text" disabled="disabled" name="ip" id='ip' />
<input type="button" name="control" id="control" />
<input type="text" name="name" />
<input type="text" name="email" />
<input type="submit" value="send" />
Now put jquery code at end of file
$( "#control" ).click(function() {
$('#ip').toggleDisabled();
});
try this one:
<input type="text" disabled="disabled" name="ip" id="ip" />
<input type="button" value="Refresh" onclick="$('#ip').attr('disabled',false);">
<input type="text" name="name" />
<input type="text" name="email" />
<input type="submit" value="send" />
Give ID for your textbox.
<input type="text" disabled="disabled" name="ip" id="YourID"/>
And in jquery :
$(document).ready(function(){
$('#YourButtonID').click(function(){
if($('#YourID').prop('disabled'))
$('#YourID').prop('disabled', false)
else
$('#YourID').prop('disabled', true)
//Do nothing if not required.
});
})
Consider your buttons as shown below:
<input type="text" disabled="disabled" name="ip" /> <input type="button" id="myButton" />
Now, on clicking button right next to it you have to remove the disabled attribute of ip button in jquery as:
$("#myButton").click(function(){
$("input[name='ip']").removeAttr('disabled');
});
That's it..!!
You can use attr("disabled",false) to remove disabled attribute
Demo
you can try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function enable(){
$('#ip').prop("disabled",false);
}
</script>
<input type="text" disabled="disabled" name="ip" id="ip" />
<input type="button" value="Refresh" onclick="enable();">
Check this javascript for a working example and a possible solution using javascript.
Check this jQuery 1.6+ using jQuery 1.6+.
If you want to use jQuery 1.5-, just change prop by attr.
Hope it useful!

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

Categories