【问题标题】：form reset button conflict with jquery reset表单重置按钮与 jquery 重置冲突
【发布时间】：2013-04-18 12:09:54
【问题描述】：

我遇到了一些奇怪的事情。我有以下表格：

<form id="addExpenseForm" name="addExpenseForm" data-bind="submit: addExpense">
    <input type="submit" value="Add" class="save" id="submit" name="submit" />
    <input type="reset" value="Reset" class="reset" id="reset" name="reset" />
</form>

如您所见，里面有一个reset按钮，用于清除所有form。

我正在使用Knockout.js 来绑定form 和reset 的submit 这样...

self.addExpense = function (formElement) {
  $('#addExpenseForm')[0].reset();
};

一切似乎都很好，但我收到了这个错误：

Uncaught TypeError: Property 'reset' of object #<HTMLFormElement> is not a function

而且我不知道为什么会得到这个，因为我的代码是正确的，奇怪的是代码在删除 reset 按钮时工作正常。

我该如何解决这个问题？ reset()方法和reset按钮同时使用会不会有冲突？

只是要知道，我制作了这个 jsfiddle 来测试删除 reset 按钮并验证我在这里问的是什么。

http://jsfiddle.net/oscarj24/vWNf7/

【问题讨论】：

你能多显示一点你的代码，也许是重置按钮使用的html吗？
仅供参考，我刚刚在很多帮助下更新了答案！希望你能找到你需要的东西！

标签： javascript jquery html knockout.js form-submit

【解决方案1】：

将重置按钮 id 属性从“reset”更改为其他任何值。

请参阅此处了解您收到错误的原因：https://stackoverflow.com/a/12541054/492325

【讨论】：

【解决方案2】：

是的，这里有很大的不同。使用 jQuery 时，通过 jQuery 样式调用的 DOM 元素（exp. $("addExpenseForm")）被赋予“属性”。如何编写和添加这些属性取决于元素及其使用（以及其他东西，但这是另一课）。

可以这么说，当您在没有重置按钮的情况下创建 from 时，“属性”重置确实是一个函数！查询时返回如下值：function reset() { [native code] }。

但是，当您手动添加按钮时（也就是将其放置在 HTML 中），reset 将变为 THAT BUTTON 而不是函数。换句话说，它会返回类似<input type="reset" value="Reset" class="reset" id="reset" name="reset" />。

这是你的问题...

如果按钮是通过 HTML 添加的，则使用：

$('#addExpenseForm')[0].reset.click();

否则，按钮不是type="reset"，而只是一个说“重置”的按钮，或者根本没有按钮！使用：

$('#addExpenseForm')[0].reset();

或

将其全部包含在一个大的 if 语句中！

if (typeof $('#addExpenseForm')[0].reset == "function") {
    $('#addExpenseForm')[0].reset();
}
else {
    $('#addExpenseForm')[0].reset.click();
}

仅针对咧嘴笑和咯咯笑，这是一行中的 IF 语句：

typeof $("#addExpenseForm")[0].reset == "function" ? $("#addExpenseForm")[0].reset() : $("#addExpenseForm")[0].reset.click();

【讨论】：

【解决方案3】：

试试这个

$('#resetBtn').on('click', function(e){
    e.preventDefault();
    $("#myform")[0].reset.click();
}

【讨论】：