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

Jazzy 1012
Jazzy 1012 used Ask the Experts™
on
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

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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
Jazzy 1012

Author

Commented:
Its not working
Jazzy 1012

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

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Find out now!
Jazzy 1012

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

Jazzy 1012

Author

Commented:
I also tried yours but it didnt work as well.
Julian Hansen
Most Valuable Expert 2017
Distinguished Expert 2018

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

The sample I posted works.
Jazzy 1012

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?
Julian Hansen
Most Valuable Expert 2017
Distinguished Expert 2018

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

Jazzy 1012

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?
Jazzy 1012

Author

Commented:
Thank you! Sorry for the complications it was my internet fault. thank you!
Julian Hansen
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
No problem - glad you got it working.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial