dimanche 18 décembre 2016

CheckBox If Statement checking is not not checking the nest condition

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

    }
  }
}
<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: http://ift.tt/2hhaPew

Plunker: http://ift.tt/2h1SK8g




Aucun commentaire:

Enregistrer un commentaire