How to make submit button only submit when the total of inputs combined is equal to or less than X

Question

I have a form in my .ejs file which has 4 number inputs and 1 text input. When clicking the submit button I want to run a script to check if the total of all thenumber inputs<= 1140. If it is within that boundary, submit. If it is not within that boundary, display that the total is higher than 1140 and ask the user to change their inputs.

Here is the code for my .ejs file, which includes my attempt at the script, but I'm not 100% sure on how to implement it.

<!DOCTYPE html>
<html lang="en">

<html>

<head>
    <title>MTU Phone Usage Monitor</title>
    <link rel="stylesheet" href="/stylesheets/styleHome.css"></link>
</head>

<body>
    <div class=" banner">
        <div class="navbar">
            <img src="\images\logo.png" class="logo">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/phone/create">New Entry</a></li>
                <li><a href="/table">View Data</a></li>
                <li><a href="/help">Help</a></li>
            </ul>
        </div>

        <div class="content">
            <h2>Enter Phone usage data</h2>

            <form action="/phone/create" method="post">

                <p>
                    <label for="name">Enter your full name:</label>
                    <input type="String" id="name" name="name" placeholder="Name" required>
                </p>
                <br>
                <p>
                    <label for="timeEducation">How much time used for education:</label>
                    <input type="Number" id="timeEducation" name="timeEducation" placeholder="Time in minutes" min="0" max="1140" required>
                </p>
                <br>
                <p>
                    <label for="timeShopping">How much time used for shopping:</label>
                    <input type="Number" id="timeShopping" name="timeShopping" placeholder="time in minutes" min="0" max="1140" required>
                </p>
                <br>
                <p>
                    <label for="timeBrowsing">How much time used for browsing and searching:</label>
                    <input type="Number" id="timeBrowsing" name="timeBrowsing" placeholder="Time in minutes" min="0" max="1140" required>
                </p>
                <br>
                <p>
                    <label for="timeSocial">How much time used for social media:</label>
                    <input type="Number" id="timeSocial" name="timeSocial" placeholder="Time in minutes" min="0" max="1140" required>
                </p>
                <br>
                <!-- add date input whenever -->
                <button id="button" type="submit">submit</button>
                <!--make hidden unless values withn 1140 in total-->
                <script>
                    function findTotal() {
                        var arr = document.getElementById( 'timeEducation', 'timeShopping', 'timeBrowsing', 'timeSocial');
                        var total = 0;
                        let element = document.getElementById("button")
                        for (var i = 0; i < arr.length; i++) {
                            if (parseInt(arr[i].value))
                                total += parseInt(arr[i].value)
                        }
                        if (total <= 1140) {
                            //on click of button, submit
                        } else {
                            //on click of button, display the total of inputs combined must not exceed 1140
                        }
                    }
                </script>

            </form>
        </div>

</body>

</html>

Answer 1

You can try to use event.preventDefault on else statement, it should work since you're using form element or you could try to change button type to button if value is not equal to 1140