Single input field with formula then calculate that formula onblur, returning result to same field with jQuery or JS

user_10829718 0
Viewed 30

I would like to input a formula in an input field, then onblur the formula I just typed will calculate and return the result in the same field, replacing the formula.

ex. inputing 2+2 gets replaced with 4 onblur or inputing (8*4)+3 gets replaced with 35.

I'd like to use the class to bind the script so I can use it on multiple fields. Is there a command or function I need to call to tell jquery that I want to calculate the contents of the single input? I found 50 answers about calculating multiple input boxes, but not 1 answer about using just a single input field for everything.

UPDATE: I've revised my jQuery to work with eval, though that is considered super dangerous and I can't actually use it. But seeing it work at least was optimistic.

I also deleted the link to my fiddle because as was pointed out, jsfiddle isn't loading any jquery libraries so it will never work on there.

<html>
<input id='formula_and_total' class='self_calculate'>
</html>

$(document).ready(function() {
  $('input.self_calculate').on('blur', function() {
    //let formula = $ (input, this).val ();
    let formula = $(this).val();
    //let formula = document.getElementById ('formula_and_total').value;
    $(this).val(eval(formula));
  });
});
calculated-field jquery
2 Answers

there are a lot of problems with the provided code. first, your jsfiddle is not using jquery, so $ will be undefined.

next, the selector $("input[.self_calculate]") will not find the input you are trying to get. instead you would use something like $("input.self_calculate").

next, the text() method does not get/set text in an input field, instead it would be used to set the text nested within a tag, so like <p></p> would become <p>formula</p> using text('formula') on it. instead for inputs you would want to use the val() method to get/set an input's value.

next, $(this).attr("value") is always going to equate to an empty value. either use prop('value') or val() to get the input's current value.

next, i am not sure what you are trying to do with the + before $(this).attr("value"). this will do nothing as far as I can tell.

next, even after switching the last line to something that would set the value of the input, you are setting the value to a literal string by putting quotes around 'formula'. if you want to set it to the value of the variable named formula, you would remove the quotes, so it would look like this: $(this).val(formula);

next, nothing in your code will help javascript calculate a formula. you would have to do something like run eval() on the input's value to calculate a mathematical formula, but that would leave your site open to security holes and is not recommended. here it is anyways for learning purposes, but please don't post this on a public facing site as it will run any javascript code typed into the input: $(this).val(eval(formula));

user_5129220

You may try this solution. (if i got you right)

<input id="formula_and_total" class="self_calculate">

Use a well formated input tag -> with "" to prevent errors.

  $(document).ready(function () {
            $(".self_calculate").on("blur", function () {
                let formula = +$(this).val() + 1;  // add 1
                $("#formula_and_total").val(formula);
            });
  });

My demo formula just add's 1 to the input field.

user_188464740
Related