2015-02-22 2 views
1

Я подготовил эту демонстрацию для задачи http://jsfiddle.net/20k4ur8o/Стоп отправки формы с JavaScript

Как вы можете видеть, когда вы пытаетесь отправить форму через вход он останавливается, но при нажатии на кнопку отправки формы. Как я могу запретить отправку формы при вызове .submit() без перезаписывания поведения функции по умолчанию, потому что мне нужно также сохранить других подчиненных слушателей активными при их вызове?

HTML

<form action=test id=form> 
    <input type=submit> 
</form> 
<button id=submit>Submit</button> 

JS

document.getElementById('form').addEventListener('submit', function (e) { 
    e.preventDefault(); 
    alert('stopped'); 
}, false); 

document.getElementById('submit').onclick = function() { 
    document.getElementById('form').submit(); 
} 
+0

... Почему? –

+0

Что значит, почему? И как, черт возьми, вы отправили комментарий с 4 символами O.O –

+0

Если кто-то хотел называть форму .submit() 'в форме, ясно, они хотели ее отправить, почему вы пытаетесь их остановить? Вы создаете условие гонки. Что касается комментария, есть много вещей, о которых вы не знаете об этом сайте :) –

ответ

1

Вы могли бы сделать что-то вроде этого:

(function() { 
    var form = document.getElementById('form'); 
    var submit = form.submit; 

    form.submit = function() { 
    var evt = new Event('submit', { 
     cancelable: true 
    }); 

    form.dispatchEvent(evt); 

    //minimc the default behaviour and submit the form if 'preventDefault' was not called. 
    if (!evt.defaultPrevented) { 
     submit.call(form); 
    } 
    }; 
}()); 

Но быть наградой, что это может привести к памяти утечки в старых браузерах.

EDIT Обновите код, чтобы включить событие, излучающее. Это проверяется только в последних версиях WebKit/BLINK и FireFox. Для IE и более старого браузера вам может понадобиться резерв.

Updated fiddle

EDIT 2
Вы должны думать о том, возможно другое решение, например, что-то вроде этого:

function submitCallback(e) { 
    e.preventDefault(); 
    alert('stopped'); 
}  

document.getElementById('form').addEventListener('submit', submitCallback, false); 

formPreventSubmit(document.getElementById('form'), submitCallback); 


function formPreventSubmit(form, submitCallback) { 
    var submit = form.submit; 

    form.submit = function() { 
    var evt = new SomeCustomEvent(); 

    submitCallback(evt) 

    if (!evt.defaultPrevented) { 
     submit.call(form); 
    } 
    }; 
} 

SomeCustomEvent нужно быть какой-то класс, который имитирует поведение реального события, имеющего preventDefault функцию.

+0

, но 'submit' не является дочерним элементом' form':? –

+0

@php_nub_qq Я думал, вы хотели бы предотвратить 'document.getElementById ('form'). Submit();' от отправки формы? –

+0

Извините, теперь я вижу, что вы сделали. Это хорошая идея, но, к сожалению, невозможно реализовать, потому что я не могу позволить себе удалить поведение по умолчанию 'form.представить() '. Например, если бы я сделал это, то вызов 'form.submit()' не запускал бы отправку прослушивателей –

0
document.getElementById('submit').onclick = function() { 
    document.getElementById('form').submit(function(e) { 
    alert("Handler for .submit() called."); 
    e.preventDefault(); 
    }); 
} 

EDIT: Моя ошибка, я неправильно понял ваш вопрос. Вам просто нужно связать прослушиватель событий с методом submit и запустить тот же метод preventDefault.

http://api.jquery.com/submit/

+0

Это не про кнопку, я могу назвать '.submit()' из любого места –

+0

ну, что что я делаю? Также я не использую jquery –

Смежные вопросы