How to handle if condition in jQuery

Question

I have a class that has an image

<a class="proceed-btn right" onclick="validateall();" style="cursor: pointer;">Proceed To Next Step >>></a>

WHICH THIS CSS

.proceed-btn {
  background:url("images/proceed-btn.gif") no-repeat scroll 0 0 transparent;
  height:35px;
  width:275px;
}

then on the same page I have these input fields and links

<input type="text" id="name" name="name" value="" class="field left">
<input type="text" id="company" name="company" value="" class="field left">
<input type="text" id="email" name="email" value="" class="field left">

<a onclick="setindustry('3');" style="cursor: pointer;" class="industry_links highlight">Retail</a>

<a onclick="setsystems('5');" style="cursor: pointer;" class="count_links highlight">5</a>

I want the top button to have a .new_button class when all of the following are executed

.new_button { background-position: 0 -35px; text-decoration: none; color: #fff; }

there is at least one letter for each of the text fields, and the industry_links and count_links classes have at least one class with a highlight class

Basically I want to change the color of the button when all five are completed

Sorry to be so confused

Answer 1

var allHaveAtleastOneLetter = true;
$("input[type='text']").each(function(){ allHaveAtleastOneLetter && ($(this).val().length > 0 )});

var industryLinksHasHighlight = $(".industry_links.highlight").length > 0;

var countLinksHasHighlight = $(".count_links.highlight").length > 0;

if(allHaveAtleastOneLetter && industryLinksHasHighlight && countLinksHasHighlight){
   $("proceed-btn.right").addClass("new_button");
}

Answer 2

Well, I went for a method that, in my opinion, is the most readable one.
Here:

if($('#name').val().length>0 && 
   $('#company').val().length>0 && 
   $('#email').val().length>0 &&
   $('.industry_links.highlight').length > 0 &&
   $('.count_links.highlight').length > 0
  ) {
   // Of course you could make #FF0000 any colour you want
   $('.proceed-btn.right').css('color', '#FF0000');
}

Answer 3

, , css :

$('.buttonsClass').each(function(){

if(this.css('text-decoration') == 'none'
   && ... )
 this.addClass('new_button');
});

, , firebug .

Answer 4

psudo jquery, :

$(elements you are looking for).change(function() {
    if(condition A &&
      condition B &&
      . 
      .
      .
      condition Z)
     {
        $(element you want to change).addClass('class you want to add');
     }
});

You listen to the changes in any of the elements, check that all conditions are met, and then apply this change.

Answer 5

You are doing it wrong.

If it were me, I would use validation tools (for example, this http://bassistance.de/jquery-plugins/jquery-plugin-validation/ ), and if the form passes the validation, add a class to your button using "addClass "to change the color of the button.

If the form fails validation, delete the class (and disable the button?).