We help IT Professionals succeed at work.

How to make button inactive until I fill in all the boxes.

Jazzy 1012
Jazzy 1012 asked
on
215 Views
Last Modified: 2017-03-14
I have this code:
<div id="OrderGetStarted" class="new">
<div class="started">
<span class="block">
<h1 class="textCenter OldStandard orange fontt">Get Started</h1>
<form>
<input type="email" placeholder="Email" class="js-email" required>
<span class="block darkRed js-email-err err"></span>
<input type="text" placeholder="Zip Code" class="js-zip" required>
<span class="block darkRed js-zip-err err"></span>
<input type="text" placeholder="First Name" class="js-name" required>
<span class="block darkRed js-name-err err"></span>
<input type="text" placeholder="Last Name" class="js-lname" required>
<span class="block darkRed js-lname-err err"></span>
<input type="text" placeholder="Password" class="js-pass" required>
<span class="block darkRed js-pass-err err"></span>
<input type="text" placeholder="Confirm Password" class="js-pass" required>
<span class="block darkRed js-pass-err err"></span>

<span class="textLeft flex alignCenter terms">
<input type="checkbox" required>
<span>
<span>I agree to</span>
<a class="orange" href="legal.php">Terms & Conditions</a>
</span> </span>
<span class="block darkRed js-post-err err"></span>
<span class="textLeft flex alignCenter terms">
<span>
Keep me posted!
 </span></span>
 <center>
<input class="orangeBtn white cbtn c1" type="submit" value="START MY ORDER">
</center>
</form>
<span class="textCenter block">
<span>Already have an account?</span>
<span class="orange pointer">Login Here</span>
</span>
</span>
</div>
</div>

Open in new window

css:
.new{
background-color: white;
margin-right:350px;
margin-left:350px;
 z-index: 10;	
}
.started{
	margin-top:-100px;
}
input[type="text"]{
border: 3px solid #eae9ef;
border-radius: 3px !important;
box-sizing: border-box !important;
background: rgba(255,255,255,0) !important;
padding: 1.5em 1em !important;
}
input{
text-rendering:auto;
color: initial;
letter-spacing:normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
font: 13.3333px Arial;
}
#OrderGetStarted .orangeBtn{
width:150px;
padding:1em;
border-radius:3px;
border:none;
margin:3em auto;
padding-left:35px;
display:inline;
margin-left:30px;
}
.cbtn:hover{
	background-color: #b13812 !important;
    color: white;
}

Open in new window


How can I make the button inactive with this color:
#C1C1C1 and become clickable/active with the same color it has now, when the user has entered all their information and agreed to the terms?
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
Its not working

Author

Commented:
This is what I have:
<h1 class="textCenter OldStandard orange fontt">Get Started</h1>
<form>
<input type="email" placeholder="Email" class="js-email" name="email" required>
<span class="block darkRed js-email-err err"></span>
<input type="text" placeholder="Zip Code" class="js-zip" name="zip" required>
<span class="block darkRed js-zip-err err"></span>
<input type="text" placeholder="First Name" class="js-name" name="fname" required>
<span class="block darkRed js-name-err err"></span>
<input type="text" placeholder="Last Name" class="js-lname" name="lname" required>
<span class="block darkRed js-lname-err err"></span>
<input type="text" placeholder="Password" class="js-pass" name="pass" required>
<span class="block darkRed js-pass-err err"></span>
<input type="text" placeholder="Confirm Password" class="js-pass" name="cpass" required>
<span class="block darkRed js-pass-err err"></span>

<span class="textLeft flex alignCenter terms">
<input type="checkbox" name="terms" value="yes" required>
<span>
<span>I agree to </span>
<a class="orange" href="legal.php">Terms & Conditions</a>
</span> </span>
<span class="block darkRed js-post-err err"></span>
<span class="textLeft flex alignCenter terms">
<span>
Keep me posted !
 </span></span>
 <center>
<input class="disabled white c1" type="submit" value="START MY ORDER" disabled>
</center>
</form>

<span class="textCenter block">
<span>Already have an account?</span>
<span class="orange pointer">Login Here</span>

Open in new window

JS:
$(function() {
  $('form input').change(function() {
    var invalid = false;
    var terms = false;
    var res = $(this.form).serializeArray();
    $.each(res, function(i, e) {
      if (e.value == "") invalid = true;
      if (e.name == 'terms') terms = true;
    });
    if (!invalid && terms) {
      $('#submit-btn').prop({disabled: false}).removeClass('disabled');
    }
    else {
      $('#submit-btn').prop({disabled: true}).addClass('disabled');
    }
  });
  $('form').submit(function(e) {
    e.preventDefault();
  });
});

Open in new window

css:
I added this with the rest and remove .OrangeBtn from before
.c1.disabled {
 background-color: #c1c1c1;
width:150px;
padding:1em;
border-radius:3px;
border:none;
margin:3em auto;
padding-left:35px;
display:inline;
margin-left:30px;
}

Open in new window

Author

Commented:
But i want it to add this class when its not disabled
#OrderGetStarted .orangeBtn{
width:150px;
padding:1em;
border-radius:3px;
border:none;
margin:3em auto;
padding-left:35px;
display:inline;
margin-left:30px;
}

Open in new window

Author

Commented:
I also tried yours but it didnt work as well.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Its not working
Not helpful.
What is not working?
How is it not working?

The sample I posted works.

Author

Commented:
My button is disabled, when I post everything, it is still disabled, can I add this call ".OrangeBtn" when it is not disabled?
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Yes just append the .addClass('.OrangeBtn') to the following line like this
$('#submit-btn').prop({disabled: false}).removeClass('disabled').addClass('.OrangeBtn');

Open in new window

And remember to remove it if one of the fields goes blank
$('#submit-btn').prop({disabled: true}).addClass('disabled').removeClass('.OrangeBtn');

Open in new window

Author

Commented:
Ok can you take a look at the second code I posted after I said its not working, because it still isnt, and I rechecked yours and it worked, I thought there was something wrong with my internet, but mine still isnt working, am I missing something?

Author

Commented:
Thank you! Sorry for the complications it was my internet fault. thank you!
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
No problem - glad you got it working.