Equation in form option

Question

I am using javascript and html to do a form. How do I code such that I can have an equation in each option value? I am trying to achieve something like this(shown below) but the code below does not work.Can anyone be able to help? Thanks.
Length x Width = X
The equation in the option value doesn't work

Length(ft): <input type="text" id="Length"><br>
Width(ft): <input type="text" id="Width"><br>
<form>
<select id="grassheight">
<option value="2x+2.5">10mm</option>
<option value="2x+3.5">20mm</option>
<option value="2x+4.5">30mm</option>
</select>
</form>
<button onclick="myFunction()">Calculate</button><br>

<script>
function myFunction() {
var grassheight = document.getElementById("grassheight").value;

var Length =  document.getElementById("Length").value;
var Width =  document.getElementById("Width").value;
var area = Math.ceil(Length * Width / 0.92 * grassheight);
document.getElementById("Result").innerHTML = area;
}

what does it really do? use function if it involves computation. — Sachi Tekina, May 07 '18 at 06:04
hi, please describe more about your problem. What does not work with your code? and what are you trying to do? — Pajri Aprilio, May 07 '18 at 06:05
It looks like you already have resolved the problem, there seems to be equations as the value in the options ..? — Teemu, May 07 '18 at 06:10
`The equation in the option value doesn't work`, that won't work because it is treated as string — Sachi Tekina, May 07 '18 at 06:17
@Teemu Question is not resolved. i need a equation in the value option — NoobProgrammer, May 07 '18 at 06:18
You should reconsider your design approach. Evaluating strings as expression is dangerous in JS because it is open to tampering by users. What do the variable `x` and `y` refer to? Does `x` refer to the input value and `y` refers to the computed grass height? — Terry, May 07 '18 at 06:19
@Terry i have updated the code. pls check again. X is length * Width — NoobProgrammer, May 07 '18 at 06:20
@Terry this is just for internal use, so tampering is not a issue but thanks for your advice i will sanitised the data later — NoobProgrammer, May 07 '18 at 06:23
It's not about sanitising the data: https://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea — Terry, May 07 '18 at 06:23
@Terry so do you have any suggestion for me on how can this be done? — NoobProgrammer, May 07 '18 at 06:29

Nick · Answer 1 · 2018-05-07T06:43:34.300

2

If you're happy using eval and you have control over the option values, then you could use something like this (assuming I have interpreted your question correctly):

Length(ft): <input type="text" id="Length"><br>
Width(ft): <input type="text" id="Width"><br>
<form>
<select id="grassheight">
<option value="2*x+2.5">10mm</option>
<option value="2*x+3.5">20mm</option>
<option value="2*x+4.5">30mm</option>
</select>
</form>
<button onclick="myFunction()">Calculate</button><br>

<script>
function myFunction() {
  var Length =  document.getElementById("Length").value;
  var Width =  document.getElementById("Width").value;
  var x = Length * Width;
  var grassheight = eval(document.getElementById("grassheight").value);
  var area = Math.ceil(Length * Width / 0.92 * grassheight);
  document.getElementById("Result").innerHTML = area;
}

What I've done is made the values of the options into equations that can be parsed by javascript (2*x+2.5 instead of 2x+2.5), then I set the value of x as Length * Width (as you describe in your question) and eval the option value, which will (if for example the first option is selected) make grassheight = 2*x+2.5 = 2*Length*Width + 2.5

If you don't want to use eval, this question could provide some ideas on how to evaluate a mathematical expression without eval.

edited May 07 '18 at 06:43

answered May 07 '18 at 06:32

Nick

138,499
22
57
95

Really thankful for your explanation it work, however from https://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea, do you have any idea if i do not want to use eval – NoobProgrammer May 07 '18 at 06:39
are you able to help me? i want to learn the correct way of coding. appreciate any suggestion – NoobProgrammer May 07 '18 at 06:41
@NoobProgrammer In a comment in the comment thread of the question you said "_this is just for internal use, so tampering is not a issue_", now what's wrong with eval then? – Teemu May 07 '18 at 06:44
2

If you're confident that the option values won't be tampered with on the server, then eval will be safe in this situation. Otherwise, see my edit for a link to some other possible ways of parsing math expressions in javascript. – Nick May 07 '18 at 06:44
@Teemu yes it is for internal usage and tampering isnt an issue, but from what i learn from you guys eval method have its own loophole. apart from completing this project i also wish to improve my programming skills so i want to learn the correct method of doing it as it might help me in my future project – NoobProgrammer May 07 '18 at 06:58
@NoobProgrammer glad you got a solution that doesn't use eval although it's a bit more complicated. – Nick May 07 '18 at 08:30

score 1 · Accepted Answer · answered May 07 '18 at 07:18

If you don't want something like this, please let me know.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        
        var Length, Width;
        function myFunction() {
            var grassheight = parseFloat(document.getElementById("grassheight").value);
            var area = Math.ceil((Length * Width / 0.92) * grassheight);
            document.getElementById("Result").innerHTML = area;
        }
        
        function UpdateOption() {
            Length = document.getElementById("Length").value != "" ? parseFloat(document.getElementById("Length").value) : 0;
            Width = document.getElementById("Width").value != "" ? parseFloat(document.getElementById("Width").value) : 0;
            $('select option')[0].value = (2 * Length * Width) + 2.5;
            $('select option')[1].value = (2 * Length * Width) + 3.5;
            $('select option')[2].value = (2 * Length * Width) + 4.5;
        }
    </script>
</head>
<body>
    Length(ft): <input type="text" id="Length" onchange="UpdateOption();"><br>
    Width(ft): <input type="text" id="Width" onchange="UpdateOption();"><br>
    <form>
        <select id="grassheight">
            <option value="2x+2.5">10mm</option>
            <option value="2x+3.5">20mm</option>
            <option value="2x+4.5">30mm</option>
        </select>
    </form>
    <div id="Result"></div>
    <button onclick="myFunction()">Calculate</button><br>

</body>
</html>

score 0 · Answer 3 · answered May 07 '18 at 10:36

It looks like you're trying to use JS to evaluate a string as an expression, which is often dangerous because it is prone to injection attacks, and is also less performant because the browser has to compile it on-the-fly.

What you have is what I would call a X-Y problem: what you want is to simply think of a mathematical solution that can calculate the correct area, instead of trying to evaluate strings.

If we look into your calculations (and you mentioned that x refers to the product of Length and Width, your equations can be collapsed into a single one:

area = 2 * (Length * Width) + 1.5 + (grassheight / 10)

You see, if you have a grassheight of 10, the above formula will evaluate to:

area = 2 * (Length * Width) + 2.5

For a grass height of 20, you will get:

area = 2 * (Length * Width) + 3.5

…so on and so forth. So your real problem is that you are unable to find a mathematical formula that describes the linear relationship you want—and has little to do with using JS to eval() a string. See proof-of-concept below:

document.getElementById('calculateResult').addEventListener('click', function() {
  var grassheight = +document.getElementById('grassheight').value;
  var length = +document.getElementById("Length").value || 0;
  var width = +document.getElementById("Width").value || 0;
  var area = Math.ceil(length * width * 2 + 1.5 + (grassheight / 10));
  document.getElementById("result").innerHTML = area;
});

Length(ft): <input type="text" id="Length"><br>
Width(ft): <input type="text" id="Width"><br>
<form>
<select id="grassheight">
<option value="10" selected>10mm</option>
<option value="20">20mm</option>
<option value="30">30mm</option>
</select>
</form>
<button id="calculateResult">Calculate</button>
<div id="result"></div>

Equation in form option

3 Answers3