使用prototype.js 停止表单提交答案

【问题标题】：stopping form submit with prototype.js使用prototype.js 停止表单提交
【发布时间】：2013-03-14 19:50:42
【问题描述】：

似乎有一个问题或者我不知道如何停止使用prototypejs提交表单。也许有人可以帮助我解决我面临的问题

考虑这个简单的形式

<form id="formContact" method="post">
    <p>Name:
        <br />
        <input type="text" id="name" name="yourName" size="20" />
    </p>
    <p>E-mail:
        <br />
        <input type="e-mail" name="yourEmail" size="20" />
    </p>
    <p>Message:
        <br />
        <textarea cols="20" rows="10" name="yourMessage"></textarea>
    </p>
    <p>
        <input type="submit" value="Submit this form" name="submitButton" />
    </p>
</form>

还有这个来自原型手册http://prototypejs.org/doc/latest/dom/Event/stop/的小js sn-p

Event.observe('formContact', 'submit', function (event) {
    var login = $F('name').strip();
    if ('' == login) {
        Event.stop(event);
        // Display the issue one way or another
    }
});

$('formContact').submit();

这一切都在小提琴中：http://jsfiddle.net/C3eFu/2/

现在的问题是，如果单击按钮，它会完全停止表单，但在使用 javascript 提交表单时不会。？这是原型未能阻止事件的 1% 吗？

【问题讨论】：

标签： javascript forms prototypejs

【解决方案1】：

根据很多谷歌搜索，当调用 .submit() 方法时，显然不会在表单上触发 onsubmit 事件。这不是缺少 PrototypeJS，而是更多的是 Javascript 中未修复的行为。

您可以通过调用onsubmit 处理程序然后观察事件是否停止然后决定触发提交method() 来使您的代码按照您希望的方式运行。

【讨论】：

这可以用 jquery 完成，没有任何问题，所以我认为它会触发，让我看看我是否可以举个例子
查看这个使用 jQuery 可以处理这种情况的小提琴：jsfiddle.net/zTLC6
这些是 2 种不同的 submit() 方法 - 在您使用 PrototypeJS 的第一个小提琴中，调用的 submit() 方法是实际的表单对象方法 - 与 jQuery 的第二个小提琴相比，submit() 方法是最终触发实际表单对象方法的 jQuery 方法。 jQuery fiddle 中的 FWIW 触发的事件与 js 中的 cmets 相反。

【解决方案2】：

简单的方法是将type="submit"改为type="button"，然后捕获按钮的点击事件，也可以捕获提交事件：

function stopDefAction(evt) {
     evt = evt || event;
     if (evt.preventDefault) {
          evt.preventDefault();
     }
     else {
          evt.returnValue = false;
     }
}

见：Stop Event in IE 9 (without upgrading to Prototype 1.7)

【讨论】：

不幸的是，我无法更改源代码，但我可以包含 javascript，因此这不是解决我当前问题的方法。它可以用 jquery 来完成。我会继续寻找。
你正在使用 JavaScript - 你可以改变任何你想要的东西。
这里的情况有所不同，因为此表单是在绑定到按钮的不同事件上提交的（小提琴只是用示例表单将其说明为虚拟），我无法为此操作按钮或 dom。