0

I am developing a financial calculator and I want to show brackets around values like excel for negative numbers, I am already doing custom attribute actual val for decimal values and showing round values, so it is tough to manage another attribute for this or apply if check on every input and result, because there are thousands of calcualations.

for example.

var value = -20000 // actual value

so if I set value for input 

$("#input").val(value);

I want to show 

(20000)

but when I get value so don't need brackets in $("#input").val(), need same result

David
  • 4,785
  • 7
  • 39
  • 63
Developer
  • 7
  • 4

2 Answers2

3

To change value from negative sign (-) to braces can be done on blur function. The challenge is to get the correct value when val() event is fired. This can be done by overriding the val() event and doing the manipulation there.

(function($) {
  var originalVal = $.fn.val;
  $.fn.val = function(value) {
    if (arguments.length >= 1) {
      // setter invoked, do processing

      return originalVal.call(this, value);
    }
    //getter invoked do processing
    if ($(this).attr('data-type') == 'number') {
      var valueToReturn = originalVal.call(this);
      return valueToReturn.replace(/\(/g, '-').replace(/\)/g, '');
    }
    return originalVal.call(this);
  };
})(jQuery);

I took the idea of overriding the val() event from here.

I've created a jsFiddle here to demonstrate this. See that in the button click event handler we are just using $('#myNumber').val() to get the correct value.

Note that you would still need to handle scenarios for invalid numbers.

Hope this helps!

Community
  • 1
  • 1
Taleeb
  • 1,888
  • 18
  • 25
  • I read this question before it got edited and didnt see the replace of the dash. Your fiddle seems epic. Even though I dont have this use-case, il sure use this if i need something alike! – Randy Dec 14 '15 at 14:22
0

What you want is brackets around integers, but you cant add them with JS, is that what you are saying?

Have you tried CSS before and after?

HTML:

<p>My name is Donald</p>
<p>I live in Ducksburg</p>

<p><b>Note:</b> For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:before instead of ::before).</p>

CSS:

p::before {
    content: "(";
}

p::after {
    content: ")";
}

This way you can surround each value with brackets without any trouble.

http://www.w3schools.com/cssref/sel_before.asp

http://www.w3schools.com/cssref/sel_after.asp

https://jsfiddle.net/pa6pvpes/

Randy
  • 9,419
  • 5
  • 39
  • 56
  • Should only apply if it's negative. Also, questions mentions "inputs" (with `.val()` not .text()`) - can you confirm if css would handle inputs as well (with before+after)? It's possible OP doesn't need "inputs" and plain text would suffice, in which case this is likely ideal. – freedomn-m Dec 14 '15 at 13:48
  • If you can check wether or not a value is negative, you can give that `div` or whatever a class. Those classes are the ones you use `before` and `after` on. But if you can identify them, this does the trick. – Randy Dec 14 '15 at 14:12