Как распечатать эту HTML-форму после проверки? - PullRequest
Новая
       11

Как распечатать эту HTML-форму после проверки?

0 голосов
/ 04 ноября 2018

У меня есть следующая форма для заказа еды онлайн. После того, как пользователь нажимает кнопку «Отправить», форма проверяется, но содержимое не печатается на экране (появляется и исчезает сразу). Я обошел эту проблему, изменив «представить» с входа на кнопку. Однако как я могу напечатать содержимое, сохраняя поле ввода и вводя его как отправку?

Вот 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;


}

Ответы [ 2 ]

0 голосов
/ 04 ноября 2018

просто измените тип ввода с отправки на кнопку. потому что по умолчанию всякий раз, когда вы используете submit с формой, страница обновляется но если вы хотите показать данные своей формы на той же странице, вы можете использовать кнопку вместо отправки.

0 голосов
/ 04 ноября 2018

Информация исчезает, поскольку при отправке HTML-формы страница по умолчанию перезагружается.

Вам нужно выбрать форму и сказать, чтобы она не перезагружалась с помощью preventDefault(). Тогда ваша функция проверки будет работать правильно. 

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

не забудьте сказать кнопке отправки передать событие в функцию validateOrder.

...