How to print this html form after being validated?

1663 views javascript
3

I have the following form for ordering food online. After the user clicks on the submit button, the form is validated but the content does not print on the screen (appears and dissapears immediately). I got around this issue by changing the "submit" from an input to a button. However how can I print the content by keeping the input field and type as submit ?

Here is the HTML:

<!DOCTYPE html>
<html>

<head>
    <title>Order Food</title>
    <link rel="stylesheet" type="text/css" href="order.css">
</head>

<body>

    <div id="container">
        <h2>Order Your Food Online</h2>
        <form action="" id="frm">
            <fieldset id="bc">
                <table border="0">
                    <tr>
                        <th>Item</th>
                        <th>Quantity</th>
                        <th>Price</th>
                    </tr>
                    <tr>
                        <td>Pizza</td>
                        <td><input type="text" size="3" id="pizza" /></td>
                        <td>$19.5</td>
                    </tr>
                    <tr>
                        <td>Burger</td>
                        <td><input type="text" size="3" id="burger" /></td>
                        <td>$15.5</td>
                    </tr>
                    <tr>
                        <td>Salad</td>
                        <td><input type="text" size="3" id="salad" /></td>
                        <td>$10.00</td>
                    </tr>
                    <tr>
                        <td>Soup</td>
                        <td><input type="text" size="3" id="soup" /></td>
                        <td>$5.00</td>
                    </tr>
                </table>
                <br /><br />
                <input type="submit" value="Place Order" id="sub" onclick="validateOrder()" />

            </fieldset>
            <p id="p"></p>
            <p id="pTotal"></p> <br><br>
            <p id="b"></p>
            <p id="bTotal"></p> <br><br>
            <p id="sa"></p>
            <p id="saTotal"></p> <br><br>
            <p id="so"></p>
            <p id="soTotal"></p> <br><br>
            <p id="total"></p>
            <p id="fTotal"></p>
        </form>
    </div>
    <script type="text/javascript" src="order.js"></script>
</body>

</html>

Here is the Javascript:

function validateOrder() {
    a = document.getElementById("pizza");
    pizzaAmount = a.value;
    b = document.getElementById("burger");
    burgerAmount = b.value;
    c = document.getElementById("salad");
    saladAmount = c.value;
    d = document.getElementById("soup");
    soupAmount = d.value;

    if (pizzaAmount == "" || burgerAmount == "" || saladAmount == "" || soupAmount == "") {
        alert("Missing quantity for one or more items");
    } else {
        calculateTotal();
    }
}

function calculateTotal() {

    totalPizza = pizzaAmount * 19.5;
    totalBurger = burgerAmount * 15.5;
    totalSalad = saladAmount * 10;
    totalSoup = soupAmount * 5;
    finalTotal = totalPizza + totalBurger + totalSalad + totalSoup;

    document.getElementById("p").innerHTML = "Pizza (Quantity = " + pizzaAmount + "):";
    document.getElementById("pTotal").innerHTML = " $" + totalPizza;
    document.getElementById("b").innerHTML = "Burger (Quantity = " + burgerAmount + "):";
    document.getElementById("bTotal").innerHTML = " $" + totalBurger;
    document.getElementById("sa").innerHTML = "Salad (Quantity = " + saladAmount + "):";
    document.getElementById("saTotal").innerHTML = " $" + totalSalad;
    document.getElementById("so").innerHTML = "Soup (Quantity = " + soupAmount + "):";
    document.getElementById("soTotal").innerHTML = " $" + totalSoup;
    document.getElementById("total").innerHTML = "Final Total: ";
    document.getElementById("fTotal").innerHTML = " $" + finalTotal;


}

answered question

1 Answer

4

The information disappears because when an HTML form is submitted, the page reloads by default.

You need to select the form and tell it to not reload by using preventDefault(). Then your validation function will run properly.

validateOrder(event){ 
    event.preventDefault(); 
    //rest of your code
}

don't forget to tell the submit button to pass the event to validateOrder function.

posted this

Have an answer?

JD

Please login first before posting an answer.