Single input field with formula then calculate that formula onblur, returning result to same field w-CodePudding

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.

Below is my shot-in-the-dark guess. I have learned everything about programming from stack or similar forums, so please go easy on my obvious low skill level.

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

$(document).ready(function() {
    $("input[.self_calculate]").on("blur", function() {
        let formula =  $(this).attr("value");
        $(this).text('formula');
    });
});

I've started a jFiddle with the above code https://jsfiddle.net/Skrocki/qoybu6dj/7/ but it is not working.

CodePudding user response：

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

<input id="formula_and_total" >

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.

CodePudding user response：

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