使用 Prototype 如何防止按钮提交表单？答案

【问题标题】：Using Prototype how do I prevent a button from submitting a form?使用 Prototype 如何防止按钮提交表单？
【发布时间】：2011-06-23 18:34:28
【问题描述】：

我有一个带有两个按钮的表单。底部的应该将表单提交到服务器。在表单的中间还有另一个按钮，需要触发一个简单的评分功能，并将这个评分值添加到一个新的表单字段中（根据其存在将提交或不提交）。

使用 Prototype js 库，如何取消这个中间按钮提交表单并让它执行我的计算/DOM 添加功能？

编辑：

我目前所拥有的并没有阻止表单提交...

$$('.form-submit-calculate').each(function(calculator){
calculator.observe("click",function(){alert('calculate'); return false; });
});

为

<div id="cid_31" class="form-input-wide">
                    <div style="margin-left:406px" class="form-buttons-wrapper">
                        <button id="input_31" class="form-submit-calculate">
                            Get Score
                        </button>
                    </div>
                </div>

【问题讨论】：

标签： javascript forms prototypejs dom-events

【解决方案1】：

Event.observe('scoreButton', 'click', function(e) {
    Event.stop(e);
  }
});

【讨论】：

这是正确的做法。接受的答案是不可接受的。

【解决方案2】：

您的button 不需要自动提交您的表单。

给它一个type="button"，什么都不会发生。 type="button" 没有默认操作。然后在您的 JS 中设置操作。

【讨论】：

图书馆环游道具！ +1 喜欢这样的解决方案。我还了解到 IE 中默认的type 已经是button 但所有其他浏览器都默认为submit

【解决方案3】：

只需具有附加到您不想提交的按钮的单击事件的功能返回false。您还可以在事件函数中使用 e.preventDefault。

【讨论】：

嗯，看看我的编辑。我想我现在有了，但它不起作用。

【解决方案4】：

这似乎对我有用：

$$('.form-submit-calculate').each(function(calculator){

            calculator.onclick = function(){
                    alert('calculate');
                    return false;
                }


        });

随时告诉我你更好更优雅的答案！（以及为什么会这样……我现在只是在探索 Prototype，不知道最佳实践是什么。）

【讨论】：