I am having some trouble enabling a button once 3 fields are filled. I would like to enable the Submit button once all 3 fields are filled in. It is successfully disabled on page load, but does not become enabled once the fields are filled in. Thanks for any and all help in advance!
<div class="contact-form">
<form id="contact-form" method="post" action="contact-form-handler.php">
<input name="companyname" type="text" id="companyName" placeholder=" Company Name">
<br>
<input name="name" type="text" id="contactName" placeholder=" Contact Person">
<br>
<input name="email" type="email" id="Email" placeholder=" Your Email">
<br>
<input type="tel" id="Phone" name="Phone" placeholder=" Phone Number">
<br>
<textarea name="message" class='form-control' placeholder=" Write your message here..." style="white-space:pre-wrap; height:200px;width:500px;" row="4"></textarea>
<br>
<button type="submit" name="form[Submit]" id="Submit" class="rsform-submit-button" onClick="alert('Form submitted');">SEND MESSAGE</button>
</form>
</div>
<script>
function myFunction() {
alert("Your message has been sent!");
}
jQuery("#Submit").prop('disabled', true);
var toValidate = jQuery('#companyName, #Email, #contactName'),
valid = false;
toValidate.keyup(function () {
if (jQuery(this).val().length > 0) {
jQuery(this).data('valid', true);
} else {
jQuery(this).data('valid', false);
}
toValidate.each(function () {
if (jQuery(this).data('valid') == true) {
valid = true;
} else {
valid = false;
}
});
if (valid === true) {
jQuery("#Submit").prop('disabled', false);
} else {
jQuery("#Submit").prop('disabled', true);
}
});
</script>
<br>
<input type="tel" id="Phone" name="Phone" placeholder=" Phone Number">
<br>
<textarea name="message" class='form-control' placeholder=" Write your message here..." style="white-space:pre-wrap; height:200px;width:500px;" row="4"></textarea>
<br>
<button type="submit" name="form[Submit]" id="Submit" class="rsform-submit-button" onClick="alert('Form submitted');">SEND MESSAGE</button>
</form>
</div>
<script>
function myFunction() {
alert("Your message has been sent!");
}
jQuery("#Submit").prop('disabled', true);
var toValidate = jQuery('#companyName, #Email, #contactName'),
valid = false;
toValidate.keyup(function () {
if (jQuery(this).val().length > 0) {
jQuery(this).data('valid', true);
} else {
jQuery(this).data('valid', false);
}
toValidate.each(function () {
if (jQuery(this).data('valid') == true) {
valid = true;
} else {
valid = false;
}
});
if (valid === true) {
jQuery("#Submit").prop('disabled', false);
} else {
jQuery("#Submit").prop('disabled', true);
}
});
</script>
Try the following code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>Ilan's Test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="contact-form">
<form id="contact-form" method="post" action="#">
<input name="companyname" type="text" class="form-control vcheck" id="companyName" placeholder=" Company Name">
<br>
<input name="name" type="text" class="form-control vcheck" id="contactName" placeholder=" Contact Person">
<br>
<input name="email" type="email" class="form-control vcheck" id="Email" placeholder=" Your Email">
<br>
<input type="tel" id="Phone" class="form-control vcheck" name="Phone" placeholder=" Phone Number">
<br>
<textarea name="message" class='form-control' placeholder=" Write your message here..." style="white-space:pre-wrap; height:200px;width:500px;" row="4"></textarea>
<br>
<button type="submit" name="form[Submit]" id="submit" class="btn btn-primary" disabled="disabled">Submit</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script>
// On change in any of the fields with the class vcheck we run this function
$('.vcheck').change(function() {
// We store the values of each input field in a variable
var company = $('#companyName').val();
var name = $('#contactName').val();
var email = $('#email').val();
var phone = $('#Phone').val();
// We check for null (empty) values
if (company == '' || name == '' || email == '' || phone == '') {
// When we find something blank set or keep the button to disabled
$('#submit').attr('disabled', 'disabled');
} else {
// When all conditions are met and values are good we enable the button
$('#submit').removeAttr('disabled');
}
});
</script>
</body>
</html>