时间戳

首页 > 解决方案 > 如何在javascript中获取表单的值并计算值并在同一页面显示答案？

javascript - 如何在javascript中获取表单的值并计算值并在同一页面显示答案？

问题描述

我想从单选按钮和输入字段和数量字段中获取值并计算它们显示在同一页面上下面的图像是我的问题

标签： javascript

解决方案

使用代码示例发布您的问题。这样，社区就可以看到您正在使用的内容。它还有助于可视化问题。

无论如何，我将假设您正在使用 HTML/JS。如果您正在使用一些后端，即 PHP、NodeJS 等，那么还有其他方法可以实现结果。但是，由于您没有指定，因此这里是基于纯 HTML 和 JS 的示例。

将表单和隐藏结果div放在同一个 HTML 中。把div你想显示答案的地方，例如在你的图片下面。

<form id="myForm">
    <label for="price">Price:</label><br>
    <input type="text" id="price" name="price" value="25"><br>
    <label for="qty">Qty:</label><br>
    <input type="text" id="qty" name="qty" value="5"><br><br>
    <input type="submit" value="Submit">
</form>

<div id="myResults" class="myResults" style="display: none;">
    <h3>Results</h3>
    <p>Subtotal <span id="subtotalDisplay"></span></p>
</div>

请注意，我没有为元素放置action和method属性。<form>所以，这个表单提交不会去其他任何地方。

在 JS 中，在表单的提交侦听器中进行数据检索和计算。将您的结果放在 hidden 内的任何元素中div，然后显示 div。

document.addEventListener('DOMContentLoaded', e => {
    let formElement = document.forms.myForm;
    let resultDiv = document.getElementById('myResults');

    formElement.addEventListener('submit', e => {
        e.preventDefault();
        let formData = new FormData(formElement); // build form data
        let price = formData.get('price'); // get form field values
        let qty = formData.get('qty');
        let subtotal = parseFloat(price) * parseFloat(qty);
        console.log('subtotal', subtotal);
        document.getElementById('subtotalDisplay').innerHTML = subtotal; // put your results where they need to be
        resultDiv.style.display = 'inherit'; // make the hidden div visible.
    });

});

我希望这有帮助。

推荐阅读