Avatar of Jazzy 1012
Jazzy 1012
 asked on

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?
JavaScriptCSS

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Jazzy 1012

ASKER
Its not working
Jazzy 1012

ASKER
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

Jazzy 1012

ASKER
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

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Jazzy 1012

ASKER
I also tried yours but it didnt work as well.
Julian Hansen

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

The sample I posted works.
Jazzy 1012

ASKER
My button is disabled, when I post everything, it is still disabled, can I add this call ".OrangeBtn" when it is not disabled?
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Julian Hansen

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

ASKER
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

ASKER
Thank you! Sorry for the complications it was my internet fault. thank you!
Your help has saved me hundreds of hours of internet surfing.
fblack61
Julian Hansen

No problem - glad you got it working.