форма сброс кнопка конфликт с перезагрузкой jquery

Question

Я встречаюсь с чем-то странным. У меня есть следующий вид:

<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 связать submit в form и reset это таким образом ...

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/

Answer 1

Да, есть большая разница здесь. При использовании jQuery элементы DOM, вызванные с помощью jQuery styling (exp. $ ("AddExpenseForm")), получают «свойства». Как эти свойства написаны и добавлены, зависит от Элемента и его использования (и других вещей здесь и там, но это еще один урок).

Достаточно сказать, когда вы создаете из БЕЗ кнопки сброса, тогда сброс «свойства» действительно является функцией ! При запросе будет возвращено следующее значение: function reset() { [native code] }.

Однако, если вы добавите кнопку вручную (иначе вы поместите ее в HTML), тогда сброс станет кнопкой THAT и NOT A. Другими словами, он вернет что-то вроде <input type="reset" value="Reset" class="reset" id="reset" name="reset" />.

В этом ваша проблема ...

Если добавлена ​​кнопка VIA HTML Затем используйте:

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

Else, кнопка не type="reset", а просто кнопка, которая говорит «сброс» или просто нет кнопки! Использование:

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

ИЛИ обернуть все это в один большой, если заявление!

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(); 

Answer 2

Изменить кнопку сброса атрибута идентификатор от «перезагрузки» к чему-либо еще.

Смотрите здесь для объяснения того, почему вы получаете ошибку: https://stackoverflow.com/a/12541054/492325

Answer 3

Попробуйте

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