CheckBox If Statement checking is not not checking the nest condition

Question

Functionality:

Users are to input their details in a form that consists of: dropdown menu, input textfield and a checkbox. Hence, the first check is to ensure that the appropriate fields are filled and no blank fields, and if all appropriate fields are filled, the second condition will check if the checkbox has been ticked. Depending on whether the checkbox has been ticked, it will perform the third check. If the checkbox is checked(user only has to spend 50 dollars to proceed else an error msg will appear) else if checkbox is not checked(users to only spend 100 dollars else an error msg will appear).

Hence the functional flow as follows:

if (dropdown menu_1 & input text field_1 is filled OR dropdown menu_2 & input text field_2 is filled ), it will check on checkbox -> if (checkbox is ticked), it will check on the value -> if (input text field_1 is more than $x OR input text field_2 is more than $x OR input text field_1 + input text field_2 is more than $x)

Issue:

Irregardless of the value the user has input in the textfield, the condition check for the value to be either more than 50 dollars or 100 dollars is is always called.

Hence, even if user were to check the box and input 20dollars, the correct behaviour is to show error msg that the user has to spend 50 dollars but the current behaviour allows the user to submit the details and proceed to the next page.

I would need some assistance on what has been wrong as the check syntax is to check for the value in the textfield is it is more than the stated values depending on the state of the checkbox.

//Check for Input Field

if (($.trim($("#dropDownShops_1").val()) == "" || $.trim($("#ReceiptField_1").val()) == "") && ($.trim($("#dropDownShops_2").val()) == "" || $.trim($("#ReceiptField_2").val()) == "")) {

  console.log("Receipt_Field_Error wrong");
  $("#ReceiptInput_Field_Error").html("* Please fill in appropriate fields.");
  $("#ReceiptInput_Field_Error").fadeIn();

  setTimeout(function() {
    $("#ReceiptInput_Field_Error").fadeOut();
  }, 5000);

} else {

  //Check if American Card is used: Min spending of SGD$120 else will be min spending of SGD$150

  //AmexCard User
  if ($('#AmaxCardField').is(':checked')) {

    //Check that the input value field is SGD$120 or more else, inform that minimum spending is SGD120
    if (($("#ReceiptField_1").val() >= '120') || ($("#ReceiptField_2").val() >= '120') || [
      [($("#ReceiptField_1").val()) + ($("#ReceiptField_2").val())] >= '120'
    ]) {

      //Condition Passed
      console.log("Amex user and spent more than $120");

      alert("Amex user and spent more than $120");
    } else {
      //inform that minimum spending is SGD120

      $("#ReceiptInput_Field_Error").html("* Your Minimum Spending should be $120 to qualify.");
      $("#ReceiptInput_Field_Error").fadeIn();

      setTimeout(function() {
        $("#ReceiptInput_Field_Error").fadeOut();
      }, 5000);
    }

  } else if ((!$('#AmaxCardField:checked').length)) {

    //Check that the input value field is SGD$150 or more else, inform that minimum spending is SGD150
    if (($("#ReceiptField_1").val() >= '150') || ($("#ReceiptField_2").val() >= '150') || [
      [($("#ReceiptField_1").val()) + ($("#ReceiptField_2").val())] >= '150'
    ]) {


      console.log("Amex user and spent more than $150");

      alert("Amex user and spent more than $150");
    } else {
      //inform that minimum spending is SGD120

      $("#ReceiptInput_Field_Error").html("* Your Minimum Spending should be $150 to qualify.");
      $("#ReceiptInput_Field_Error").fadeIn();

      setTimeout(function() {
        $("#ReceiptInput_Field_Error").fadeOut();
      }, 5000);

    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ReceiptInput_Field_Error" style="z-index:1; position:absolute; top:270px; left:650px; display: none; font-size:35px; font-family:'Gothic'; width:1080; color:#fff;"><font face="Gothic">* Please fill in appropriate fields.</font>
</div>

<form>

  <!-- DropDown Menu to choose Participating Outlet -->
  <select id="dropDownShops_1">
    <option value="" selected disabled>Please Select Shops ...</option>
  </select>

  <input type="text" id="ReceiptField_1" style="z-index=10; position:absolute; top:390px; left:858px; height:58px; width:265px; outline:0; border: 0; font-size:25px; font-family:'Gothic'; color:#765725; background: transparent;" autofocus>

  <select id="dropDownShops_2">
    <option value="" selected disabled>Please Select Shops ...</option>
  </select>

  <input type="text" id="ReceiptField_2" style="z-index=10; position:absolute; top:585px; left:858px; height:58px; width:265px; outline:0; border: 0; font-size:25px; font-family:'Gothic'; color:#765725;  background: transparent;">

  <input type="checkbox" id="AmaxCardField" style="z-index=10; position:absolute; top:690px; left:420px; height:30px; width:30px; outline=0; border: 0; background: transparent;">
</form>

JSFiddle: https://jsfiddle.net/s42akp2k/

Plunker: https://plnkr.co/edit/fLETQc4gS0stYHro7pNF?p=catalogue

You’re comparing strings. Strings are compared lexicographically. Convert everything to numbers when comparing values numerically. — Sebastian Simon, Dec 19 '16 at 06:00
Possible duplicate of [javascript if number greater than number](http://stackoverflow.com/questions/13079626/javascript-if-number-greater-than-number) — Sebastian Simon, Dec 19 '16 at 06:05

score 0 · Answer 1 · edited May 23 '17 at 11:53

You may like to have a look at this to make your input field as a number type then use a number comparer instead of string like this(changed the comparer to remove currency symbol and make it a number):

 //AmexCard User
  if ($('#AmaxCardField').is(':checked')) {

    //Check that the input value field is SGD$120 or more else, inform that minimum spending is SGD120
    if ((Number($("#ReceiptField_1").val().replace(/[^0-9\.]+/g,"")) >= 120) || (Number($("#ReceiptField_2").val().replace(/[^0-9\.]+/g,"")) >= 120) || (
      ((Number($("#ReceiptField_1").val().replace(/[^0-9\.]+/g,""))) + (Number($("#ReceiptField_2").val().replace(/[^0-9\.]+/g,"")))) >= 120
    )) {

      //Condition Passed
      console.log("Amex user and spent more than $120");

      alert("Amex user and spent more than $120");
    } else {
      //inform that minimum spending is SGD120

      $("#ReceiptInput_Field_Error").html("* Your Minimum Spending should be $120 to qualify.");
      $("#ReceiptInput_Field_Error").fadeIn();

      setTimeout(function() {
        $("#ReceiptInput_Field_Error").fadeOut();
      }, 5000);
    }

Even with `type="number"` on an input the `.val()` method will still return a string, won't it? (Though `>=` will then coerce that to a number if the other operand is a number.) — nnnnnn, Dec 19 '16 at 06:04

score 0 · Accepted Answer · answered Dec 19 '16 at 06:13

For some reason, you have an array in your condition. I think you meant to use parentheses for grouping, not brackets. I fixed that and now it's working.

//Check for Input Field

$('#submit').click(function(){
if (($.trim($("#dropDownShops_1").val()) == "" || $.trim($("#ReceiptField_1").val()) == "") && ($.trim($("#dropDownShops_2").val()) == "" || $.trim($("#ReceiptField_2").val()) == "")) {

  console.log("Receipt_Field_Error wrong");
  $("#ReceiptInput_Field_Error").html("* Please fill in appropriate fields.");
  $("#ReceiptInput_Field_Error").fadeIn();

  setTimeout(function() {
    $("#ReceiptInput_Field_Error").fadeOut();
  }, 5000);

} else {

  //Check if American Card is used: Min spending of SGD$120 else will be min spending of SGD$150

  //AmexCard User
  if ($('#AmaxCardField').is(':checked')) {

    //Check that the input value field is SGD$120 or more else, inform that minimum spending is SGD120
    if (($("#ReceiptField_1").val() >= 120) || ($("#ReceiptField_2").val() >= 120) || (
      (($("#ReceiptField_1").val()) + ($("#ReceiptField_2").val())) >= '120'
    )) {

      //Condition Passed
      console.log("Amex user and spent more than $120");

      alert("Amex user and spent more than $120");
    } else {
      //inform that minimum spending is SGD120

      $("#ReceiptInput_Field_Error").html("* Your Minimum Spending should be $120 to qualify.");
      $("#ReceiptInput_Field_Error").fadeIn();

      setTimeout(function() {
        $("#ReceiptInput_Field_Error").fadeOut();
      }, 5000);
    }

  } else if ((!$('#AmaxCardField:checked').length)) {

    //Check that the input value field is SGD$150 or more else, inform that minimum spending is SGD150
    if (($("#ReceiptField_1").val() >= '150') || ($("#ReceiptField_2").val() >= '150') || (
      (($("#ReceiptField_1").val()) + ($("#ReceiptField_2").val())) >= '150'
    )) {


      console.log("Amex user and spent more than $150");

      alert("Amex user and spent more than $150");
    } else {
      //inform that minimum spending is SGD120

      $("#ReceiptInput_Field_Error").html("* Your Minimum Spending should be $150 to qualify.");
      $("#ReceiptInput_Field_Error").fadeIn();

      setTimeout(function() {
        $("#ReceiptInput_Field_Error").fadeOut();
      }, 5000);

    }
  }
}
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ReceiptInput_Field_Error"><font face="Gothic">* Please fill in appropriate fields.</font>
</div>

<form>

  <!-- DropDown Menu to choose Participating Outlet -->
  <select id="dropDownShops_1">
    <option value="" selected disabled>Please Select Shops ...</option>
    <option value="...">...</option>
  </select>

  <input type="text" id="ReceiptField_1" autofocus>

  <select id="dropDownShops_2">
    <option value="" selected disabled>Please Select Shops ...</option>
    <option value="...">...</option>
  </select>

  <input type="text" id="ReceiptField_2" >

  <input type="checkbox" id="AmaxCardField" >
  
  <input type="submit" id="submit" />
</form>

CheckBox If Statement checking is not not checking the nest condition

2 Answers2