how to check if and else if together in javascript

Question

/html code/ Here there are 4 textbox having minimum & maximum bugdet and area. I want to check the value that maximum value should be greater than minimum area in bugdet and area.I am checking it when the form is submited. Currently my condtion is not working for else if.

  <div class="col-xs-12 margin-y">
         <div class="width">
            <label class="col-xs-12 col-md-2">Budget</label>
            <div class="col-xs-12 col-md-10">
               <div class="col-xs-12 col-md-6 no-padding-left no-padding-left no-padding-mobile padding-vertical">
                  <input class=" form-control"   placeholder="Minimum Budget"  id="req_min_budget" name="req_min_budget" onkeypress='return validateArea(event);'>
               </div>
               <div class="col-xs-12 col-md-6 no-padding-right no-padding-left no-padding-mobile padding-vertical">
                  <input class=" form-control"  placeholder="Maximum Budget" id="req_max_budget" name="req_max_budget" onkeypress='return validateArea(event);'><span style="color:#d9534f" id="maxBudgetError"></span>
               </div>
            </div>
         </div>
      </div>
      <div class="col-xs-12 margin-y">
         <div class="width">
            <label class="col-md-4 col-md-2">Carpet Area</label>
            <div class="col-xs-12 col-md-10 no-padding padding-vertical">
               <div class="col-md-4  padding-vertical">
                  <input class=" form-control" placeholder="Minimum Area"  onblur="return validateMaxArea1(this.value)"   id="req_min_area" name="req_min_area" onkeypress='return validateArea(event);'>
               </div>
               <div class="col-md-2  no-padding-left  padding-vertical ">
                <select onchange="return changeUnit(this.value)" id="req_carpet_area_unit" required  name="req_carpet_area_unit" class="btn btn-default dropdown-toggle">
         <!-- <option value=''>Select carpet unit</option> -->
                   <?php
         global $SQFT;

          echo $this->home_model->get_dropdown('area_unit',$SQFT)?>
      </select>
               </div>
               <div class="col-md-4 padding-vertical">
                  <input class=" form-control" onblur="return validateMaxArea(this.value)"  placeholder="Maximum Area" id="req_max_area"  name="req_max_area" onkeypress='return validateArea(event);'/><span style="color:#d9534f" id="maxAreaError"></span>
               </div>
                <div class="col-md-2">
                   <select disabled id="req_carpet_area_unit1" required  name="req_carpet_area_unit1" class="btn btn-default dropdown-toggle">
         <!-- <option value=''>Select carpet unit</option> -->
         <?php
         global $SQFT;

          echo $this->home_model->get_dropdown('area_unit',$SQFT)?> 
      </select>
               </div>

            </div>
         </div>
      </div>

      <button type="submit"  class="col-xs-offset-8 col-md-offset-11 btn btn-gray" id="req_submit" name="req_submit">Submit</button>

javascript script

$(function() {
    // Setup form validation on the #register-form element
    $("#register").validate({
        // Specify the validation rules
        // Specify the validation error messages

        submitHandler: function(form)  {
            var req_min_area = $('#req_min_area').val();
            var req_max_area = $('#req_max_area').val();
            var req_min_budget = $('#req_min_budget').val();
            var req_max_budget = $('#req_max_budget').val();

            if(req_min_area!='' && req_max_area!='') {

                if(parseFloat(req_min_area)>parseFloat(req_max_area)) {
                    $('#req_max_area').css('border-color','#d9534f');
                    document.getElementById("maxAreaError").innerHTML = "Maximum area should be greater than minimum";
                } else {
                    insertReqData();
                }
            } else if(req_min_budget!='' && req_max_budget!='') {
                alert(parseFloat(req_min_budget)>parseFloat(req_max_budget));

                if(parseFloat(req_min_budget)>parseFloat(req_max_budget)) {
                    $('#req_max_budget').css('border-color','#d9534f');
                    document.getElementById("maxBudgetError").innerHTML = "Maximum area should be greater than minimum";
                } else {
                    insertReqData();
                }
            } else {
                insertReqData();
            }
        }
    });
});

Answer 1

well your else if condition will work when your first condition is false which isn't your goal TRY THIS

if(req_min_area!='' && req_max_area!='') {
            if(parseFloat(req_min_area)>parseFloat(req_max_area)) {
                $('#req_max_area').css('border-color','#d9534f');
                document.getElementById("maxAreaError").innerHTML = "Maximum area should be greater than minimum";
            } else {
                insertReqData();
            }
        }
        if(req_min_budget!='' && req_max_budget!='') {
            if(parseFloat(req_min_budget)>parseFloat(req_max_budget)) {
                $('#req_max_budget').css('border-color','#d9534f');
                document.getElementById("maxBudgetError").innerHTML = "Maximum area should be greater than minimum";
            } else {
                insertReqData();
            }
        } 

Answer 2

Your If statement always goes to If not elseif except If statement is False ( req_min_area or req_max_area is empty string ). Put your elseif in If statement and change it to If should do the work.