Popup css modal on form input

#1

I have a form that collects temperatures. I am using input type=tel to get a number. If the hot water is over 41 and the cold water is over 20 i want to automatically open a css modal pop up box with a warning message. If the hot is 41 or under and the cold is 20 or under then it inputs the form sata as normal.

here is my code

<p>Hot &nbsp <input type="tel" name="room1hot" style="width: 5em" required> &deg;C &nbsp 
Cold &nbsp <input type="tel" name="room1cold" style="width: 5em" required> &deg;C</p>

thanks
I have 66 bedrooms hot and cold to input.

#2

You would use an array name for the form fields, with the room number as the array index. You would also dynamically produce that many repetitive same meaning form fields using a loop. The form fields should also be ‘sticky’ and repopulate the field values with any existing data, in case there is a validation error (or later when you are editing existing data.)

As to your main question, are you using a client-side library, such as jquery/bootstrap?

Saved sessions when logged out
#3 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left {
            width: 40%;
            float: left;
        }
    </style>

</head>

<body>
    <div class="left">

        <p id="contentArea">
        <p class="content">

        </p>
        </p>

        <input type="button" value="Submit" onclick="print()" />
    </div>

    <div class="right">
        <p>Results</p>
        <p id="results"></p>
    </div>
    <script>
        addItem();
        function addItem() {
            let rooms = prompt("How many rooms?");
            let content = document.getElementsByClassName("content")[0].innerHTML;
            console.log(content)
            let myInput;


            for (let i = 0; i < rooms; i++) {
                document.getElementById('contentArea').innerHTML +=
                    `
                <p>
                    <p>Room ${i + 1}:</p>
                    Hot &nbsp <input type="tel" name="hot[]" style="width: 5em"> &deg;C &nbsp
                    Cold &nbsp <input type="tel" name="cold[]" style="width: 5em"> &deg;C
                </p>
                `;
            }
        }
        function print() {
            let inputs = document.getElementsByTagName("p");
            let output = document.getElementById("results");
            let hot = document.querySelectorAll("[name='hot[]']");
            let cold = document.querySelectorAll("[name='cold[]']");
            console.log(hot);

            for (let i = 0; i < inputs.length; i++) {
                //check hot
                if (!tempValidation(hot[i].value)  || !tempValidation(cold[i].value)
                ) openDialog(`Room ${i + 1} temp off`);


                results.innerHTML += `<p>Room ${i + 1} Hot temp: ` + hot[i].value + ` Cold temp: ` + cold[i].value + `</p>`;
            }
        }

        function tempValidation(temp) {
            // hot
            const minHot = 41;
            if (temp <= minHot)  return false;            
            
            // cold
            const maxCold = 20;
            if (temp >= maxCold) return false;
           
            // if valid return true
            return true;
        }

        function openDialog(input) {
            // Open dialog and pass message into here
            alert(input);
        }
    </script>
</body>

</html>
Sponsor our Newsletter | Privacy Policy | Terms of Service