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();
            }
        }
    });
});

put if inside if. Because you can not check both at same time. for example there is no number which is less then 5 and greater then 7. — urfusion
– urfusion, Commented Jul 5, 2017 at 10:35
if(req_min_area!='' && req_max_area!='') { So if both the minimum and maximum "area" values are set the if condition will be met so the else if condition will not be triggered. Is that what you want? Why not just do if(req_min_area!='' && req_max_area!='' && req_min_budget!='' && req_max_budget!='') { ... do everything requried ... } else { insertReqData(); } or two separate, independent if statements? — CD001
– CD001, Commented Jul 5, 2017 at 10:50

Mohamed Anouar Hrairi · Accepted Answer · 2017-07-05 11:12:39Z

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();
            }
        }

gaback · Accepted Answer · 2017-07-05 10:44:42Z

0

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.

answered Jul 5, 2017 at 10:44

gaback

6381 gold badge6 silver badges13 bronze badges

Collectives™ on Stack Overflow

how to check if and else if together in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related