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

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?
LVL 1
Jazzy 1012Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Firstly there are no names on your <input>'s which will make your form invalid and difficult to work with.

CSS (added the following style)
.cbtn.disabled {
  background-color: #c1c1c1;
}

Open in new window

HTML (updated to include formatting and names for input - also added an ID for your submit
<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" 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="firstname" required>
        <span class="block darkRed js-name-err err"></span>
        <input type="text" placeholder="Last Name" class="js-lname" name="lastname" required>
        <span class="block darkRed js-lname-err err"></span>
        <input type="text" placeholder="Password" class="js-pass" name="password" required>
        <span class="block darkRed js-pass-err err"></span>
        <input type="text" placeholder="Confirm Password" class="js-pass" name="confirm" 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 cbtn c1" type="submit" id="submit-btn" value="START MY ORDER" disabled>
        </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

jQuery
<script>
$(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();
  });
});
</script>

Open in new window

Working sample here

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Jazzy 1012Author Commented:
Its not working
Jazzy 1012Author 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

Ensure Business Longevity with As-A-Service

Using the as-a-service approach for your business model allows you to grow your revenue stream with new practice areas, without forcing you to part ways with existing clients just because they don’t fit the mold of your new service offerings.

Download eBook
Jazzy 1012Author 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

Jazzy 1012Author Commented:
I also tried yours but it didnt work as well.
Julian HansenCommented:
Its not working
Not helpful.
What is not working?
How is it not working?

The sample I posted works.
Jazzy 1012Author Commented:
My button is disabled, when I post everything, it is still disabled, can I add this call ".OrangeBtn" when it is not disabled?
Julian HansenCommented:
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

Jazzy 1012Author 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?
Jazzy 1012Author Commented:
Thank you! Sorry for the complications it was my internet fault. thank you!
Julian HansenCommented:
No problem - glad you got it working.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.