Why is my submit button populating?

Question

I would like to require three fields be filled out prior to enabling the submit button. The jquery below is kind of working, however the submit button is being enabled even though not all three fields to be populated, except for the drop down list selection. Please don't mind the mess, I was trying several different ways to debug this but I am at a loss. As stated the select list works as it should. Please check out the jsfiddle example.

http://jsfiddle.net/FPtCE/

HTML: --------- High medium low

<input class="required" id="id_title" name="title" placeholder="Please enter a title."     type="text" />

<textarea class="required" id="id_comment" name="comment" placeholder="Comment is required">
</textarea>

<input id='submit' type="Submit" value="Submit Comment">

</form>

jquery:

$(document).ready(function() {
 var val1 = false;
 var val2 = false;
 var val3 = false;

$('input[id="submit"]').attr('disabled','disabled');                           
  $('textarea[id="id_comment"]').keyup(function() {
    if (val2 == false || val3 == false ||       (!$.trim($('textarea[id="id_comment"]').val())) && ($('textarea[id="id_comment"]').val() == '')) {
        $('input[id="submit"]').attr('disabled','disabled');
        val1 = false;
     alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3)
    }

  else{  
    $('input[id="submit"]').removeAttr('disabled');
    val1 = true;
    alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3)
  }
});

$('input[id="id_title"]').keyup(function() {
  if (!$.trim($('input[id="id_title"]').val())){
    if (val1 == false && val3 == false){
     if ($('input[id="id_title"]').val() == ''){
        $('input[id="submit"]').attr('disabled','disabled');
        val2 = false;
        alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3)
    }
   }
  }
      else if (!$.trim($('input[id="id_title"]').val())){
    if (val1 == false && val3 == false){
     if($('input[id="id_title"]').val() != '') {
        $('input[id="submit"]').attr('disabled','disabled');
        val2 = true;
        alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3)
    }
   }
  }
  else{  
    $('input[id="submit"]').removeAttr('disabled');
    val2 = true;
    alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3)
  }                                                                                       
});                                                                                        

$('select[id="id_priority"]').change(function() {
  if (val1 == false && val2 == false && ($('select[id="id_priority"]').val() == '')) {
        $('input[id="submit"]').attr('disabled','disabled');
        val3 = false;
        alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3)
    }
  else if (val1 == false && val2 == false && ($('select[id="id_priority"]').val() != '')) {
        $('input[id="submit"]').attr('disabled','disabled');
        val3 = true;
        alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3)
    }
  else{  
    $('input[id="submit"]').removeAttr('disabled');
    val3 = true;
    alert ("Comment set:"+val1+", Title set: "+val2+", Priority set: "+val3)
  }   
});

});     

Answer 1

Check this if this is what you need:-

Fiddle

 function checkSubmit() {

        $('#submit').prop('disabled', !((($('#id_priority').val() !== "")
         && $('#id_title').val() !== "" 
         && $('#id_comment').val() !== "")));
    }

Simplest Version:- Fiddle

$(document).ready(function () {
    $('#submit').attr('disabled', 'disabled');
    $('#id_comment').keyup(checkSubmit);
    $('#id_title').keyup(checkSubmit);
    $('#id_priority').change(checkSubmit);

    function checkSubmit() {

         $('#submit').prop('disabled', !(($('#id_priority').val() !== "") 
                      && $.trim($('#id_title').val()) !== "" 
                      && $.trim($('#id_comment').val())!== ""));
         }
});