javascript - 如何双向计算表单字段值？-6ren

javascript - 如何双向计算表单字段值？

转载作者：塔克拉玛干更新时间：2023-11-02 22:15:12

我尝试构建项目的表单，我可以在其中放置不同的公式来计算某些字段。

主要问题:我希望公式可以双向工作，例如

当用户输入商品的价格时，表单应根据价格计算总和(价格 * 数量)。
当用户输入sum时，表单应该根据sum计算商品的price (sum/数量).

我找到了 Calcx -- great and powerful jQuery plugin for building a calculation form并根据我的需要修改了其中一个示例，但没有弄清楚是否有可能以某种方式使其像我在上面的描述中想要的那样工作。

还有一些其他问题我没有找到解决方案:

带有公式和设置的字段 readonly: false 应该是可编辑的。我示例中的类 .sum 的字段仍然不可编辑。为什么？
我在 qty 字段周围添加了 + 和 - 按钮以增加/减少功能，但为了让它们正常工作，我必须分离Calcx 功能，然后再次附加。有没有更简单的方法来实现这一目标？

免责声明 我的问题的解决方案可能还涉及除 Calcx 之外的其他技术。也许某些插件或框架有更好的工具来满足我的需求。

对于历史，我也在这里添加了代码示例，但要使用它可能更好地查看 JSfiddle

<!DOCTYPE html>
<html>
<head>
  <title>testc calcx</title>
  <meta charset=utf-8>
  <meta name=description content="testime">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="/js/jquery-calx-1.1.9.js"></script>

<style type="text/css">
  .plusminus {
    font-weight: bold;
    font-family: monospace;
    font-size: 1.3em;
    border: 1px green solid;
    padding: 0px 5px;
  }
</style>

  <script>

  $(document).ready(function(){

      $('#itemlist').calx();

      $('.sum').calx({
        readonly: false
      });

      $('.plusminus').click( 
        function () {
          $('#itemlist').calx('detach');  

          var operation = $( this ).text();
          var row = $( this ).attr('id').split('_').slice(1);
          var qty = $( '#qty_' + row ).val();

          if ( operation == '+' ) {
            $( '#qty_' + row ).val( ++qty );
          } else if ( operation == '-' ) {
            $( '#qty_' + row ).val( --qty );
          } else {
            alert( "Something wrong! " + $( this ).attr('id') );
          }
          $('#itemlist').calx();  
          $('#itemlist').calx('refresh');
        }
      );
  });

  </script>
</head>
<body>

<form id="itemlist">

  <input type="text" placeholder="Item" id="A1" size="20" value="HDD Baracuda Black 2TB" />

    <span id="min_1" class="plusminus">-</span>
    <input type="text" placeholder="Qty" id="qty_1" value="1" size="2" data-format="0" />
    <span id="plus_1" class="plusminus" >+</span>

  <input type="text" placeholder="Price" id="C1" size="5" data-format="$ 0,0[.]00" />
  <input type="text" placeholder="Disc." id="D1" size="3" data-format="0[.]00 %" />
  <input type="text" placeholder="Sum" id="E1" size="6" class="sum" data-formula="($qty_1*$C1)*(1-$D1)" data-format="$ 0,0[.]00" />
  <br />

  <input type="text" placeholder="Item" id="A2" size="20" value="Motherboard ASus XYZ" />

    <span id="min_2" class="plusminus">-</span>
    <input type="text" placeholder="Qty" id="qty_2" value="1" size="2" data-format="0" />
    <span id="plus_2" class="plusminus" >+</span>

  <input type="text" placeholder="Price" id="C2" size="5" data-format="$ 0,0[.]00" />
  <input type="text" placeholder="Disc." id="D2" size="3" data-format="0[.]00 %" />
  <input type="text" placeholder="Sum" id="E2" size="6" class="sum" data-formula="($qty_2*$C2)*(1-$D2)" data-format="$ 0,0[.]00" />
  <br />

  <input type="text" placeholder="Item" id="A3" size="20" value="Memory Kingston DDR3 4GB" />

    <span id="min_3" class="plusminus">-</span>
    <input type="text" placeholder="Qty" id="qty_3" value="1" size="2" data-format="0" />
    <span id="plus_3" class="plusminus" >+</span>

  <input type="text" placeholder="Price" id="C3" size="5" data-format="$ 0,0[.]00" />
  <input type="text" placeholder="Disc." id="D3" size="3" data-format="0[.]00 %" />
  <input type="text" placeholder="Sum" id="E3" size="6" class="sum" data-formula="($qty_3*$C3)*(1-$D3)" data-format="$ 0,0[.]00" />
  <br />

  <input type="text" placeholder="" id="total_1" data-formula="SUM($E1,$E3)" data-format="$ 0,0[.]00" />
</form>

</body>
</html>

最佳答案

我推荐你使用库 ractive.js。看看它的双向数据绑定(bind)是多么简单和自动化:http://learn.ractivejs.org/two-way-binding/1/

<label>Enter your name: <input value='{{name}}'></label>
<p>Hello, {{name}}!</p>

所以你可以这样做:

<label>Price: <input value='{{price}}'></label>
<label>Quantity: <input value='{{quantity}}'></label>
<label>Sum: <input value='{{price * quantity}}'></label>

通过这种简单的方式，您可以使用 {{price * quantity}} 等表达式并节省大量代码。 http://learn.ractivejs.org/expressions/2/

可以在{{ }}和事件之间添加js函数:

http://learn.ractivejs.org/event-proxies/1/

您可以在 60 秒内了解如何设置 ractive:http://www.ractivejs.org/60-second-setup

并在交互式教程中轻松学习:http://learn.ractivejs.org/hello-world/1/

编辑 1:

我添加了这个 jsfiddle举个例子。

关于javascript - 如何双向计算表单字段值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23325715/

文章推荐： android - 如何在没有单选组的情况下取消选中单选按钮？

文章推荐： android - 我可以检测亚马逊平板电脑和其他产品吗？

文章推荐：更改 View Controller 时的 iOS 有线卡住问题

javascript - 通过正则表达式将单引号更改为双引号。 (单字)
我尝试通过正则表达式将文本中的单引号更改为双引号。 (单字)示例:我走了。 You gona fly to planet 'Ziqtos' => 我需要在 I'm 中保留单引号，并在 You gona
rest - 单字 bool REST 资源的正确内容类型是什么？
我正在构建一个 API，其中大部分将包含 JSON 和 HTML 内容。但是一些非常具体的端点只呈现 true 或 false，并且还在 POST 中接受 true 或 false。这是请求或响应的整

塔克拉玛干

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何双向计算表单字段值？