Q: Calculate two inputs with javascript
Question
I have created the following code and on the last 3 inputs, I would like to calculate INPUT1 with INPUT2 and automatically get the result on INPUT3.
At the moment it's not working ofc, but if I change the INPUT3 to suddenly it works, but ofc I cannot get any data to be posted onto the database. How can I output the result of the calculation without having to use a span tag?
Here is the Code.
<script>
function divideBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num2 % num1;
}
</script>
<body>
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h2>Create new Route</h2>
</div>
<p>Enter the route<i><strong>"YYYY-MM-DD</i></p>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group <?php echo (!empty($reason_err)) ? 'has-error' : ''; ?>">
<label>Reason</label>
<input type="text" name="reason" class="form-control" value="<?php echo $reason; ?>">
<span class="help-block"><?php echo $reason_err;?></span>
</div>
<div class="form-group <?php echo (!empty($startdest_err)) ? 'has-error' : ''; ?>">
<label>Start Destination</label>
<input type="text" name="startdest" class="form-control" value="<?php echo $startdest; ?>">
<span class="help-block"><?php echo $startdest_err;?></span>
</div>
<div class="form-group <?php echo (!empty($enddest_err)) ? 'has-error' : ''; ?>">
<label>End Destination</label>
<input type="text" name="enddest" class="form-control" value="<?php echo $enddest; ?>">
<span class="help-block"><?php echo $enddest_err;?></span>
</div>
<div class="form-group <?php echo (!empty($startkm_err)) ? 'has-error' : ''; ?>">
<label>INPUT 1</label>
<input type="text" name="startkm" class="form-control" id="firstNumber" value="<?php echo $startkm; ?>">
<span class="help-block"><?php echo $startkm_err;?></span>
</div>
<div class="form-group <?php echo (!empty($endkm_err)) ? 'has-error' : ''; ?>">
<label>INPUT 2</label>
<input type="text" name="endkm" class="form-control" id="secondNumber" onChange="divideBy()" value="<?php echo $endkm; ?>">
<span class="help-block"><?php echo $endkm_err;?></span>
</div>
<div class="form-group <?php echo (!empty($totalkm_err)) ? 'has-error' : ''; ?>">
<label>INPUT3</label>
<input type="text" name="totalkm" id="result" class="form-control" value="<?php echo $totalkm; ?>">
<span class="help-block"><?php echo $totalkm_err;?></span>
</div>
<input type="submit" class="btn btn-primary" value="Submit">
<a href="start.php" class="btn btn-default">Cancel</a>
</form>
If i change it from:
<div class="form-group <?php echo (!empty($totalkm_err)) ? 'has-error' : ''; ?>">
<label>Total Km</label>
<input type="text" name="totalkm" id="result" class="form-control" value="<?php echo $totalkm; ?>">
<span class="help-block"><?php echo $totalkm_err;?></span>
</div>
To this it works but ofc as I said no data is posted:
<div class="form-group <?php echo (!empty($totalkm_err)) ? 'has-error' : ''; ?>">
<label>Total Km</label>
<span type="text" name="totalkm" id="result" class="form-control" value="<?php echo $totalkm; ?>">
<span class="help-block"><?php echo $totalkm_err;?></span>
</div>```
1 answers
solution1
1 2021-03-13 13:25:39
@KIKO Software I solved after reading your comment a couple of times:) code that was changed "document.getElementById("result").value" and it solved the issue now upon changing the last input it automatically calculates the result from those two inputs mentioned before, and this was the result I was looking for.
<script>
function divideBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").value = num2 % num1;
}
</script>
Thank you for your help:)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.