Конфликт кнопки сброса формы с сбросом jquery

Я столкнулся с чем-то странным. У меня такая форма:

<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/


javascript html jquery form-submit knockout.js
person atang    schedule 24.04.2013    source источник
comment
Можете ли вы показать еще немного своего кода и, возможно, HTML, используемый кнопкой сброса?   -  person Kevin B    schedule 24.04.2013
comment
К вашему сведению, я только что обновил ответ с большой помощью! Надеюсь, вы найдете то, что вам нужно!   -  person SpYk3HH    schedule 25.04.2013

Ответы (3)


arrow_upward
5
arrow_downward

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

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

Однако, когда вы добавляете кнопку вручную (то есть помещаете ее в HTML), сброс становится ЭТОЙ КНОПКОЙ, а НЕ функцией. Другими словами, он вернет что-то вроде <input type="reset" value="Reset" class="reset" id="reset" name="reset" />.

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

Если КНОПКА ДОБАВЛЯЕТСЯ ЧЕРЕЗ HTML, используйте:

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

Иначе, кнопка - это не type="reset", а просто кнопка с надписью "сбросить" или просто без кнопки! Использовать:

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

OR

wrap it all up in one big if statement!

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();
person SpYk3HH    schedule 24.04.2013

arrow_upward
0
arrow_downward

Измените атрибут id кнопки сброса с 'reset' на что-нибудь еще.

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

person badsyntax    schedule 24.04.2013

arrow_upward
0
arrow_downward

Попробуй это

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