多产品数量型订单表单 | CSS-Tricks

这基本上是我大约一年前在屏幕广播 50 中制作的订购表单的版本 2。同一客户正在将其重新激活以用于另一个期限，我借此机会重新编写了一些工作方式，使其变得更好。输入数字，自动执行数学运算，人们欢欣鼓舞。

查看演示下载文件

它做了什么？

这里的主要重点是数学。它是一个简单的产品表格，每个产品都有一个用于数量的输入框。更改该数量框的值会自动触发数学运算，并计算总计。行总计横向计算，然后订单总计纵向计算。总计数量并乘以运费，并将所有这些加在一起。

为了演示目的，该表单与 FoxyCart 集成，以展示它如何在“真实”情况下使用。

与上次相比的改进

一些功能更加高效。
数字格式化效果更好。它不再显示一个简单的 12423 框，而是显示 $12,423。这要归功于一些有趣的代码片段，例如这个代码片段。
事件处理更加智能。它不再等待输入的 blur 事件触发，而是会针对 focus、blur、change 和 keyup 事件执行数学运算，使表单看起来更加智能和快速。
总体逻辑更好，以更简洁的方式处理错误输入。

如果您有任何想法可以使其变得更好，我随时欢迎您提出。

Elijah Manor

# 2009 年 12 月 23 日

我希望您知道我非常喜欢您网站上的内容……我想让您知道，在 Chrome 4.0.266.0 中，我看到的是矩形块而不是标题中的空格（参见 twitpic）

http://www.twitpic.com/uskgz

您将在 CST 上午 9:45 左右收到技术推文；）

Akshay

评论的永久链接# 2009 年 12 月 25 日

遇到了相同的错误，希望 Chris 很快就能找到解决方案。
但是新的设计看起来更加优雅和专业……。

chris

# 2009 年 12 月 23 日

发现一个错误

在“数量”框中输入一个数字然后输入一个字母，将添加一个产品，移除一个产品，更新小计/订单总计并添加运费总计，使运费总计没有订单总计。

例如，键入“1”，然后键入“P” - 数量增加一个，然后被移除，但仍然保留 10 美元的运费，而没有数量。我认为该表单应该足够智能，知道在没有数量的情况下移除运费。

不过表单很棒。继续努力。

Chris Coyier

评论的永久链接# 2009 年 12 月 26 日

此问题应该已修复。

Erik

# 2009 年 12 月 23 日

我是一个新手。从我开始认真学习网页设计以来，我一直关注 CSS-Tricks。我最近开了一家网店，所以这篇文章对我来说特别有意思。我注意到，用户可以在数量中输入非整数和负数。例如，-.34 是一个有效的数量。总计根据负数进行添加，但最终值以正数表示。我不知道如何修复此错误，也不知道您是否想修复，因为这只是一个演示，但我认为您应该知道这个问题。

再次感谢您的网站。在过去的几个月里，您帮助了我很多。

Chris Coyier

# 2009 年 12 月 26 日

一种修复方法是编写一个 JavaScript IsInteger() 函数* 来进行验证。我不确定最佳方法是什么。最好的方法是向上取整还是向下取整？或者是否只需将字段标记为警告？

* 可能

function isInteger(s) {
      var i;

      if (isEmpty(s))
      if (isInteger.arguments.length == 1) return 0;
      else return (isInteger.arguments[1] == true);

      for (i = 0; i < s.length; i++)
      {
         var c = s.charAt(i);

         if (!isDigit(c)) return false;
      }

      return true;
}

MexiChriS

# 2009 年 12 月 23 日

我将观看该屏幕广播，以了解更多见解，然后修改这篇重新编写的文章。我对它的功能方式非常着迷。老实说，有时候，我很好奇你的大脑是如何工作的，以及如何想出这样的东西。你真聪明，Chris！

以及@chris 对那个小问题是正确的。应该更高级一点，知道如何处理这种情况。但是，我还能知道什么呢！？新手身份，哈哈。不过无论如何都很棒！:)

这种类型的文章非常适合在我的项目中实施，并应用于我朋友的音乐和 T 恤印刷业务，或任何其他类型的在线商品销售！感谢您的帖子，并继续更新，这让我充满灵感和学习！:)

– MexiChriS

kevin

# 2009 年 12 月 23 日

太棒了，这正是我几天前所需要的！如果能修复 Erik 提到的错误就太好了。我会试着看一下。感谢您提供这些内容。

grimdeath

# 2009 年 12 月 23 日

太酷了，我可能会尝试将其与我正在构建的 Shopify 电子商务网站集成。我的客户希望每个产品页面都包含一个价格不同的选项列表，并且允许输入多个选项的数量，然后单击一个按钮，类似于这里看到的 Bass Pro Shop

http://www.basspro.com/webapp/wcs/stores/servlet/Product_10151_-1_10001_100927_100005000_100000000_100005000_100-5-0

这真是一个神来之笔：D

Austin

# 2009 年 12 月 24 日

我不知道应该在哪里评论您网站的新外观……但它很漂亮！干得好！

Daniel

# 2009 年 12 月 24 日

哇，几个月前我为另一个 Web 应用程序做了类似的事情。
我建议再提示一下：添加另一个数量字段“全局数量”，这将填充用户未填写数量字段的项目。
这对于那些订购所有物品相同数量的人来说非常有用，除了 1 或 2 个物品。

好的，我的英语很糟糕，我不知道是否能更好地解释，希望你能明白；）

Konstantin

# 2009 年 12 月 25 日

还有一件事 - 我认为限制数量将是一个好主意，因为在数字很大时，计算会出错。这不是一个错误，只是一项建议。

Kevin Mist

# 2009 年 12 月 26 日

非常棒！这将非常有用，因为您发布的大多数内容都非常有用……谢谢！

Dor

# 2009 年 12 月 27 日

看起来真的很不错。

但有一些建议（我没有查看代码，但如果它与旧代码类似，请查看）：

1. 尝试使用 JavaScript 生成一些内容。几乎不可能让建立运动场的用户禁用 JS。此外，这将节省大量流量。
2. 可以使用 CSS 在之前或使用 JavaScript 生成 $ 符号，以减少标记（不再需要使用 span xD）
3. 在 PHP 中，而不是获取所有行并进行匹配，请先找出邮政编码，然后仅选择该邮政编码（如果收到响应，则表示您已正确获取）。
4. 添加一些 PHP 验证非常简单，即使是一点简单的计算也可以说“试图作弊是不好的”，以防计算出的值与最终输入中写的值不匹配。

确实非常好。

Snookerman

# 2009 年 12 月 27 日

我刚打开我的 RSS 订阅，点击了来自 css-tricks 的文章，当我返回时，看到了什么？一个橙色的星形网站图标！太棒了！您是从 FeedBurner 迁移到 WordPress，并且仍然可以管理统计信息，还是您只是忘记了统计信息，而更看重网站图标在订阅中的功能？无论哪种方式，这都很棒！谢谢！

Justin

# 2010年1月24日

您好

我搜索了几天才找到这种类型的脚本并下载了...

有几个问题...

1. 可以将 $ 更改为 £ 吗？

2. 可以完全删除运费吗？

3. 可以将整个表单放在一个页面上吗？

4. 我想在表单下方添加送货信息，可以这样做吗？如果是，怎么做？

5. 我不会使用 paypal 等，用户点击发送后，可以将此表单发送到两个不同的电子邮件地址，并将用户重定向到感谢页面吗？

我期待您的回复！

matt

# 2010年1月25日

嗨，我喜欢这个脚本，但我正在尝试使用 PHP 调用来填充产品名称和价格字段，以填充订单表单中的产品。

但是，当我输入数量并点击提交订单时，它会将总价和产品标题“多产品订单”传送到购物车，但不会传送由 PHP 填充并应显示在下面的产品副标题和数量！

请有人帮忙！！

suman

# 2010年2月20日

嗨，chris

我是一位充满热情的网页设计师，我一直关注 css-tricks。我正好需要这种订单表单，并且在想，如果我们可以通过产品名称搜索产品，那么你就不用逐个浏览产品了。这对这种多订单以及单订单都有帮助。希望你能找到解决方法，也解决我的问题。
谢谢
suman

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。