时间戳

首页 > 解决方案 > 验证后如何打印此html表单？

javascript - 验证后如何打印此html表单？

问题描述

我有以下表格用于在线订购食物。用户单击提交按钮后，表单被验证但内容不会打印在屏幕上（立即出现和消失）。我通过将“提交”从输入更改为按钮解决了这个问题。但是，如何通过保持输入字段和类型为 submit 来打印内容？

这是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>

这是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;


}

标签： javascripthtmlformsvalidationsubmit

解决方案

该信息会消失，因为当提交 HTML 表单时，默认情况下会重新加载页面。

您需要选择表单并使用preventDefault(). 然后您的验证功能将正常运行。

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

不要忘记告诉提交按钮将事件传递给validateOrder函数。

推荐阅读