【问题标题】:Form with more submits and submiting by Enter具有更多提交并通过 Enter 提交的表单
【发布时间】:2011-01-27 16:45:19
【问题描述】:

这个问题有点类似于this one

我的电子商务解决方案中有一个表格。当您将某些东西插入购物车时,您可以更改商品数量。购物车以一种形式完整。该表单有两个提交按钮 - 重新计算和继续(这将使买方进入流程的第 2 步)。


当用户使用输入更改项目数量时,他可以点击重新计算(将帖子发送到将更改会话/数据库中的数字的应用程序)或继续(这也将发送帖子数据以重新计算然后取用户执行步骤 2)。

但是当用户点击回车时,重新计算按钮优先。

我想要的是让重新计算按钮提交表单,但仅在单击时而不是在按 Enter 提交时。相反,“继续”按钮也应该与 enter 一起使用。

解决方案不得使用 javascript,因为前端必须在未启用 JS 的情况下可用。

有什么想法吗?

【问题讨论】:

    标签: html forms post submit form-submit


    【解决方案1】:

    将优先的按钮放在你的html源代码中,并使用标记来反转两个按钮的位置?

    编辑:你说你的布局无法处理。

    要么: 1. 改变布局。功能性更为重要,对于布局来说,实现的方法不止一种。 2. 让表格不检查是否按下了“重新计算”或“提交”,而是检查显示的价格是否与计算的奖金正确。示例:

    用户购买 1 件商品,价值 3 美元。 用户购买 2 件商品,价值 5 美元。 总奖金:13 美元。

    用户现在将 1 项更改为 4 项。 3 美元变成了 12 美元,但他没有重新计算。

    在表单中有一个显示总金额的字段(最好是隐藏字段)。当用户提交表单时,重新计算。如果计算出的奖品等于隐藏字段中的奖品,则用户知道最终的正确奖品。如果不同,请重新显示提及“您更改了购物车,总奖金已更新以反映这些更改。验证金额并提交购买”或其他内容的表格。

    【讨论】:

    • 我不确定是否可以这样做(即可能是 CSS 问题,因为按钮之间有很多 HTML)。很遗憾, type="button" 不会提交表单 :( 那太好了,您可以根据需要提交任意数量的按钮,但使用 enter/ 提交时只会使用 type="submit" javascript
    • 那么,你不能操作HTML,你不能使用Javascript,你想解决这个已经每个浏览器处理不同的问题?
    • 我可以修改 HTML,但我不能切换按钮的位置 :( 对于我的布局使用 CSS 是可撤消的 :(
    • 然后用另一种可能的解决方案编辑了答案。
    • 这是非常好的选择!谢谢你。之后我会尝试并接受这个答案。
    【解决方案2】:
    <input type="text" id="mytext" ... />
    <script type="text/javascript">
    document.getElementById("mytext").onkeyup = function(event) {
      if(event.keyCode=='13' || event.keyCode=='10') {
        alert('you pressed enter');
        // do whatever you want when enter is detected
      }
    }
    </script>
    

    【讨论】:

    • 你读过The solution MUST NOT use javascript as the frontend has to be useable without JS enabled. 部分吗?
    • 好吧抱歉,然后重新排列标记中的按钮。第一个将获得焦点(在大多数浏览器中)。然后再用 CSS 改变显示层上按钮的顺序。
    • 是的,问题是它们之间有很多 HTML :( 我会问我的 CSS 编码器 - 他是个巫师!:D
    【解决方案3】:

    您应该能够决定服务器端。单击按钮时,它的名称-值对被提交,但当return 被按下时,它不是。因此,请更改您的服务器端脚本以在提交重新计算名称-值时执行“重新计算”,并在所有其他情况下继续。

    【讨论】:

    • 实际上,我刚刚测试过:当您按 Enter 键时,浏览器似乎使用它找到的第一个按钮提交表单,并且确实传递了该按钮名称(使用 Opera 测试)。
    • 这是我使用 enter 提交时得到的结果:["recalculate"]=> string(13) "Recalculate"
    猜你喜欢
    • 2016-10-01
    • 1970-01-01
    • 2011-12-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-05-21
    • 1970-01-01
    相关资源
    最近更新 更多