CODEWITHSUNDEEP
javascripthtml
NoobProgrammer
NoobProgrammer

Reputation: 484

Equation in form option

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

Upvotes: 0

Views: 351

Answers (3)

Terry
Terry

Reputation: 66218

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>

Upvotes: 0

Arulraj
Arulraj

Reputation: 423

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>

Upvotes: 1

Nick
Nick

Reputation: 147216

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.

Upvotes: 2

Related Questions