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>```

Don't you want to change the value of document.getElementById("result")? And not the innerHTML? — KIKO Software
– KIKO Software, Commented Mar 13, 2021 at 13:14
Do you mean when the page loads input1+input2 and then put the value in the third input?? — Milad
– Milad, Commented Mar 13, 2021 at 13:15
@StudioMan sure, just call function inside script tag <script> divideBy() </script> — Milad
– Milad, Commented Mar 13, 2021 at 13:25

StudioMan · Accepted Answer · 2021-03-15 10:53:09Z

1

@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 :)

edited Mar 15, 2021 at 10:53

answered Mar 13, 2021 at 13:25

StudioMan

558 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

KIKO Software Over a year ago

I'm glad it worked, I wasn't sure it would.

Niet the Dark Absol Over a year ago

Okay but that leaves me with the question that you obviously knew .value was needed for reading the value, so why did you try using .innerHTML for writing the value?

StudioMan Over a year ago

@Dark absol short answer to that: I am a beginner :)

Collectives™ on Stack Overflow

Q: Calculate two inputs with javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related