文本框中的动态计算

Dynamic Calculations in Text Boxes?

本文关键字：动态 计算 文本      更新时间：2023-09-26

我对PHP相当陌生，并试图为一个有两个并排文本框的电子邮件表单构建一个动态部分。第一个是数量，第二个是总数。

我希望它将第一个文本框乘以设定值15，然后将结果显示在第二个总文本框中，该文本框将是只读的。

关于我该怎么做，有什么建议吗？我在网上搜索了很长时间，试图找到帮助，但似乎找不到。

我现有的表单代码是：

<table width="500" border="0" cellpadding="0" class="t4">
    <tr>
      <td width="48">Code</td>
      <td width="196">Event</td>
      <td width="56">Cost</td>
      <td width="66">Number</td>
      <td width="72">£ Total</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Lifewriting Workshop</td>
      <td>£15</td>
      <td><input type="text" name="Number-of-Tickets" id="W1"></td>
      <td><input type="text" readonly="readonly" name="Total" id="W1"></td>
    </tr>
</table>

工作演示

只是一个简单的演示，没有什么花哨的。这是在jquery中，但我想逻辑是我们想要的。

$('input').on("keyup",function () {
    $("#result").val(parseInt($("#amount").val(), 10)*  15);
});

使用javascript可以执行以下

 var text1 = document.getElementById('textbox1').value;
 document.getElementById('textbox2').value = parseInt(text1) * 15; //can use parseFloat() if you have floating point numbers

输入数量的第一个文本框应该有一个称为textbox1的id作为

<input type='text' id='textbox1' ...

第二个文本框的id应为textbox2。您可以拥有任何您喜欢的id，只要您将相应的id放在javascript代码中以供参考即可。

此外，您还需要从onkeydown事件或onchange事件调用的函数中触发此代码。在更改事件中，在输入数字并将焦点从textbox中移开以调用事件后，您会注意到一次更改，您可以使用元素的事件属性触发这些事件。

<input type='text' id='textbox1' onkeydown='somejavascriptfunc()`

这个解决方案使用纯javascript代码，MESSIAH的答案使用了一个名为jquery的库，这让你的生活更轻松。

PHP是服务器端语言，因此为了进行一些计算，您需要向服务器发送请求。您可以在PHP中通过生成所需的表单，将输入的值发送到服务器，然后再次生成页面，但结果填充只读字段来完成此操作。更好的方法是使用javascript，因为计算非常简单，不需要在服务器上运行。搜索javascript事件侦听器并查看jQuery，它具有易于使用的函数，用于从字段中检索值和处理事件。

相关文章：