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

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 the number 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 >
        <div >
            <img src="\images\logo.png" >
            <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 >
            <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>

CodePudding user response：

You can try to use event.preventDefault on else statement, it should work since you're using form element.

    <div >
  <h2>Enter Phone usage data</h2>

  <form>

    <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="time" 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="time" 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="time" 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="time" 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-->

  </form>
</div>

<script>
  const form = document.querySelector('form');
  form.addEventListener('submit', findTotal);

  function findTotal(e) {
    var arr = document.querySelectorAll('#time');


    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) {
       e.preventDefault();
    } else {
      
      console.log('form submitted')
    }
  }

first you're not selecting all the input elements, second place your script tag at the end of body.

CodePudding user response：

First: document.getElementById returns only one element, or null, so you have bad assignment here:

var arr = document.getElementById( 'timeEducation', 'timeShopping', 'timeBrowsing', 'timeSocial');

Basically you only need to fix that assignment, for example, using form.querySelectorAll('[type=Number]') instead of getElementById for it all to work:

const form = document.getElementById('form');
form.onsubmit = (e) => {
  if (findTotal() > 1140) {
    console.log('Not submitting!');
    // ... do other things, i.e. display an error message to user

    return false; // Stop the submit event
  }
  
  // Your actions on succesful validation of sum not greater than 1140
  console.log('The form has been submitted');
}

function findTotal() {
    const arr = Array.from(form.querySelectorAll('[type=Number]'));
    let total = 0;
    
    for (let i = 0; i < arr.length; i  ) {
        const currentInputValue = parseInt(arr[i].value, 10);
        if (currentInputValue) {
          total  = currentInputValue;
        }
    }
    
    return total;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>MTU Phone Usage Monitor</title>
    <link rel="stylesheet" href="/stylesheets/styleHome.css" />
</head>
<body>
    <div >
        <div >
            <img src="\images\logo.png" >
            <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 >
            <h2>Enter Phone usage data</h2>
            <form id="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>

                <button id="button" type="submit">submit</button>

            </form>
        </div>

</body>

</html>