CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Corey Bergeron
Corey Bergeron

Reputation: 35

Form clears after submitting

I want to have the "COST" input field highlight red and flag an error if its not filled out when the user clicks the "CALCULATE" button.

The solution I found was to use a form tag, but it seems like this simply clears my output immediately after you click "CALCULATE".

I'm still a beginner programmer, so I appreciate any simple solutions or thoughtful explanations :)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">    
    <title>Document</title>
</head>
<body>
    <form>
        Cost: <input type="number" step="0.01" name="cost" autocomplete="off" required><br>
        <br>Shipping:
        <br><input type="radio" name="shipping" value="small_poly" checked="true">Small Poly Bag
        <br><input type="radio" name="shipping" value="small_box" autocomplete="off">Small Box
        <br><input type="radio" name="shipping" value="large_box" autocomplete="off">Large Box
        <br><input type="radio" name="shipping" value="other" autocomplete="off">Other 
        <input type="number" step="0.01" name="other_value" autocomplete="off"><br>
    
        <br><button id="calculateButton" type="submit">Calculate</button><br>
        
        <div class="return-values-container">
            <div id="min">Min</div>
            <div id="min_value">0</div>
            <div id="max">Max</div>
            <div id="max_value">0</div>
        </div>
    </form>
    <script>
        document.getElementById("calculateButton").addEventListener("click", function(){
            if(document.querySelector('input[name="cost"]').validity.valid==''){
                var cost = 0;
            } else {var cost = parseFloat(document.querySelector('input[name="cost"]').value);}

            var shipping = document.querySelector('input[name="shipping"]:checked').value

            if(shipping=="other"){
                var other_input = parseFloat(document.querySelector('input[name="other_value"]').value)
                if(other_input==''){
                    console.log('other_input:'+other_input, 'please enter a value')
                } else {shipping=other_input}
            }

            var min;
            var max;

            var small_poly_price = 3.90
            var small_box_price = 3.50;
            var large_box_price = 6.98;

            // MIN CALCULALATION
            switch(shipping) {
                case "small_poly":
                    min = (1.2*cost)+small_poly_price+((2*cost)*.17);
                    document.getElementById('min_value').innerHTML = '$'+min.toFixed(2);
                    console.log(min);
                    break;
                case "small_box":
                    min = (1.2*cost)+small_box_price+((2*cost)*.17);
                    document.getElementById('min_value').innerHTML = '$'+min.toFixed(2); 
                    console.log(min);
                    break;
                case "large_box":
                    min = (1.2*cost)+large_box_price+((2*cost)*.17);
                    document.getElementById('min_value').innerHTML = '$'+min.toFixed(2);
                    console.log(min);
                    break;
               default:
                   min = (1.2*cost)+other_input+((2*cost)*.17);
                    document.getElementById('min_value').innerHTML = '$'+min.toFixed(2);
                   console.log(min);
                   break;
            }
            // MAX CALCULATION
            max = 1.1*(cost*2);
            document.getElementById('max_value').innerHTML = '$'+max.toFixed(2);
        });
    </script>
</body>
</html>

Upvotes: 1

Views: 41

Answers (1)

EugenSunic
EugenSunic

Reputation: 13703

Add prevent default to you eventListener to prevent default functionality which is page reload because of the html form tags

 document.getElementById("calculateButton").addEventListener("click", function(e){
         e.preventDefault();
....

Example: https://jsfiddle.net/7hqk4gtf/2/

Upvotes: 2

Related Questions