Jquery - dont run function if value of selected option is set to specific value

Question

I have a jquery function that detects and formats currency if datatype of an input field is set to currency. how do i make this function not run if another select field value is set to BTC here are codes. JS

$("input[data-type='currency']").on({
    keyup: function() {
      formatCurrency($(this));
    },
    focusout: function() {
      formatCurrency($(this), "blur");
    }
});

and here is my formatCurrency Function

function formatNumber(n) {
  return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
} // format number 1000000 to 1,234,567

function formatCurrency(input, blur) {
  var input_currency = ""; //the currency symbol that shows beofore the amount

  var input_val = input.val();
  if (input_val === "") { return; }
  var original_len = input_val.length;
  var caret_pos = input.prop("selectionStart");
  if (input_val.indexOf(".") >= 0) {
    var decimal_pos = input_val.indexOf(".");
    var left_side = input_val.substring(0, decimal_pos);
    var right_side = input_val.substring(decimal_pos);
    left_side = formatNumber(left_side);
    right_side = formatNumber(right_side);
    if (blur === "blur") {
    /*  right_side += "00"; */
    }
    right_side = right_side.substring(0, 2);
    input_val = input_currency + left_side + "." + right_side;
  } else {
    input_val = formatNumber(input_val);
    input_val = input_currency + input_val;
    if (blur === "blur") {
      input_val += ".00";
    }
  }

  input.val(input_val);

HTML

<input data-type="currency" name="amount">
<select class="" name="currency" id="currency" >
 <option value="$" selected>USD</option>
 <option value="₿">Bitcoin</option>
</select>

Your select has an `id="currency"`. Grab the field, get its value, perform an if check, and only do your logic if it's not the restricted value. — Taplar, Feb 04 '20 at 13:07
I am more of a backend person so not very good with Javascript or Jquery generally.. Please how do i go about this ? — GrowLoad, Feb 04 '20 at 13:09
Which part are you having an issue with? The selecting, getting the value, or the conditional? — Taplar, Feb 04 '20 at 13:09
Don't use attribute selectors for ids. `#currency` is an id selector. And you will just use `val()` to get the current value. Nothing is provided as an argument if you want to use the *getter* version. — Taplar, Feb 04 '20 at 13:12
Also since it seems you are very new to the jQuery side of things, I would highly suggest you bookmark and peruse as you have time the https://learn.jquery.com/ website, which has lots of information. — Taplar, Feb 04 '20 at 13:15
@qiAlex https://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-variables you shouldn't rely on a browser bad practice. `getElementById` exists for a reason — Taplar, Feb 04 '20 at 13:21

score 1 · Accepted Answer · answered Feb 04 '20 at 13:29

You need to add an if statement inside the .on callback function. For example you can modify your code like this

  $("input[data-type='currency']").on({
      keyup: function() {
        if($("#currency").val() != "₿"){
          formatCurrency($(this));
        }
      },
      focusout: function() {
        if($("#currency").val() != "₿"){
          formatCurrency($(this), "blur");
        }
      }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input data-type="currency" name="amount">
<select class="" name="currency" id="currency" >
 <option value="$" selected>USD</option>
 <option value="₿">Bitcoin</option>
</select>

@qiAlex maybe they do, but as a novice in js i find it harder to implement in my current code. You brought in some unknown parameters like el(no idea what it does), action (no idea why as well) which is why i edited the question to show the original code for formatCurrency so you can see how the code you want me to modify looks like .. i tried the your answer but it requires more modification to my currency code which i dont understand because i am a novice . nabeel Khan answer is far simpler for me and easier to implement — GrowLoad, Feb 04 '20 at 13:48

qiAlex · Answer 2 · 2020-02-04T13:33:25.540

Put a check in the beginning of formatCurrency and return if needed.

const formatCurrency = function(el, action) {
  // option one: checking the requirement could be here in one place
  if (!isShouldBeFormatted()) {
    return;
  }

  console.log(`do formatCurrency`);
}

const isShouldBeFormatted = () => {
  // select select element
  const elCurrency = document.querySelector(`#currency`);
  // value that we will check
  const valueToCheck = `₿`;

  return elCurrency.value !== valueToCheck;
}



$("input[data-type='currency']").on({
    keyup: function() {
      // option two: checking the requirement could be in every place you need it
      if (isShouldBeFormatted()) {
          formatCurrency($(this));
      }
    },
    focusout: function() {
      // option two: checking the requirement could be in every place you need it
      if (isShouldBeFormatted()) {
        formatCurrency($(this), "blur");
      }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input data-type="currency" name="amount">
<select class="" name="currency" id="currency" >
 <option value="$" selected>USD</option>
 <option value="₿">Bitcoin</option>
</select>

Jquery - dont run function if value of selected option is set to specific value

2 Answers2