如何防止表单提交答案

【问题标题】：How to prevent form submit如何防止表单提交
【发布时间】：2012-05-26 01:01:41
【问题描述】：

我将 KnockoutJS 与 SammyJS 一起用于一页应用程序。

在 html 中我有如下的表单标签

<form data-bind='submit: search'>
  <label>Find user:</label>
  <input data-bind='value: name' />
</form>

在我的视图模型中，声明了两个函数和 sammy route url

function ViewModel() {
    var self = this;
    self.name = ko.observable("");
    self.search = function () {
      alert(self.name);
    };

    Sammy(function () {
        this.get('#:id', function () {
           //do something....
        });           
    }).run();
}

ko.applyBindings(new ViewModel());

所有代码都运行良好，直到我在文本框中输入内容然后提交表单。我希望在警报窗口后没有 url 浏览，但 url 更改为类似“http://localhost:8258/undefined?”的内容我原来的网址是“http://localhost:8258”

我怀疑 sammy url 路由，所以从 javascript 代码中删除了 sammy 代码，然后 url 在警报窗口后不会改变。也许我不明白 sammy 的工作原理。

这种情况下如何防止url改变？

【问题讨论】：

您是否尝试过从您的self.search 函数返回false？
感谢 Gene，我注意到我没有在 Sammy 中设置发布路线。
次要...因为self.name是一个函数，你应该调用alert(self.name())。

标签： knockout.js sammy.js

【解决方案1】：

Sammy 将自己绑定到表单，以便您也可以为它们注册路由。

<form action="#1234" method="post">

JS：

Sammy(function() {
    this.post('#:id', function() {
        // do something...

        return false; // avoid form submission
    });

    // ...
}).run();

【讨论】：

【解决方案2】：

我也遇到了这个问题，我在this answer 中找到了解决方案。以下是您如何让 Sammy.js 不使用表单：

Sammy(function() {

    // Your routing.. 
    this.get('#:id', function () {
       //do something....
    }); 


    // Make Sammy.js leave the forms alone!
    this._checkFormSubmission = function(form) {
        return false;
    };

}).run();

像它应该的那样工作:)

【讨论】：