How to check If both select and input field is selected and filled up using jQuery?

Question

I have a html form where a select field and input box exist and I am using 2 class for that which is work_phone_class and work_phone_class_input .

I am calling ajax by trigger a save button with a class when select field value is changed or any option selected AND again calling ajax when user complete typing on input box. So that I am using following jQuery code :

$(".work_phone_class").change(function() {            
    $(".save_phone_class").trigger('click');
});

$(".work_phone_class_input").change(function() {            
    $(".save_phone_class").trigger('click');
});

Now I want to trigger the save button with the class when select field value is selected AND user completed typing on input box.

Update :

Html form is look like this. I think I have to use $(this) but not sure.

<select class="work_phone_class">
    <option value=""></option>
    <option value="1"></option>
</select>
<input type="text" class="work_phone_class_input">
<select class="work_phone_class">
    <option value=""></option>
    <option value="1"></option>
</select>
<input type="text" class="work_phone_class_input">
<select class="work_phone_class">
    <option value=""></option>
    <option value="1"></option>
</select>
<input type="text" class="work_phone_class_input">

Answer 1

You just have to add a test before send your ajax..

UPDATE

$(".save_phone_class").click(function(){
  var allFilled = true;
  $(".work_phone_class").each(function(){
      if($(this).val()=="")
         allFilled =false;
   });
  $(".work_phone_class_input").each(function(){
      if($(this).val()=="")
         allFilled =false;
   });
  if(allFilled)
  {
      //AJAX
  }
});

 $(".work_phone_class_save").click(function(){ var allFilled=true; $(".work_phone_class_input").each(function(){ if($(this).val()=="") allFilled=false; }); $(".work_phone_class").each(function(){ if($(this).val()=="") allFilled=false; }); if(allFilled) { alert("Ajax sent"); } else alert("All input are not filled"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="work_phone_class"> <option value=""></option> <option value="1">1</option> </select> <input type="text" class="work_phone_class_input"> <select class="work_phone_class"> <option value=""></option> <option value="1">1</option> </select> <input type="text" class="work_phone_class_input"> <select class="work_phone_class"> <option value=""></option> <option value="1">1</option> </select> <input type="text" class="work_phone_class_input"> <button class="work_phone_class_save">Save</button> 

Answer 2

I am no so clear about your requirement.... but i think this will help you

$(".work_phone_class,.work_phone_class_input").change(function() {     

$(".work_phone_class_input").each(function(){ 
if($(this).val() == ""){
//// Validation goes here for input
return false;
}
})
$(".work_phone_class").each(function(){ 
if($(this).val() == undefined){
//// Validation goes here for input
return false;
}

//// trigger your save button click here
    })



    });

please let me know if it helps by marking it as an answer