Функция не работает во время отправки формы

Почему не alert('hi') работает вообще при нажатии кнопки отправки?Функция не работает во время отправки формы

evt.preventDefault(); & evt.stopPropagation(); - не использовать форму, чтобы открыть другое окно. Однако, даже если я удалить эти строки моя функция до сих пор не называется ...

'use strict'; 
 
function handleSubmission(evt) { 
 
    evt.preventDefault(); 
 
    evt.stopPropagation(); 
 
    
 
    alert('hi'); 
 
} 
 

 
var form = document.querySelector('#formID'); 
 
form.addEventListener('submit', handleSubmission);

<!DOCTYPE html> 
 
<html lang="en-US"> 
 
    <body> 
 
    <form action="" method="post" id="formID"> 
 
     
 
     input <input type="text"> 
 
     
 
     <input type="submit" value="submit"> 
 
     
 
    </form> 
 
    </body> 
 
</html>

Не получать какие-либо ошибки в консоли.

EDIT: Чтобы добавить к путанице еще больше. Фрагмент выше не работает в Stack Overflow или в моем локальном (хромовом) браузере. Однако, по jsfiddle на предупреждения пожаров просто отлично ... https://jsfiddle.net/jpazrjt4/1/

источник

2017-02-01 sol acyon

'evt.stopPropogation' не звучит, вероятно, что засоряет все остальное. –

Ниже приведен фрагмент SO, который обеспечивает средства для достижения этого с помощью pur e Javascript, но он не будет вести себя корректно, как при нажатии «Выполнить код фрагмента».

Я хотел бы затронуть вашу озабоченность по поводу того, что он не работает в SO Snippet. SO snippet не разрешает отправку формы в свою изолированную программную среду iframe. Если вы запускаете SO фрагмента кода в Chrome, а затем открыть инструменты разработчика (Ctrl + Shift + I), вы увидите в записи журнала консоль

заблокированной форма представления в «», потому что кадр формы является песочницей и разрешение 'allow-forms' не задано.

Jsfiddle не ограничивает разрешение разрешенных форм для своих построенных iframe.Вот ссылка JSFiddle так что вы можете проверить его: jsFiddle:jsFormIntercept

(function() { 
 
"use strict"; 
 

 
    window.addEventListener("load", function() { 
 
    document.getElementById("formID").addEventListener("submit", function(event) { 
 
    event.preventDefault(); // Prevent form submission 
 
    alert('hi'); 
 
}, false); 
 
    }, false); 
 
}());

<!DOCTYPE html> 
 
<html lang="en-US"> 
 
    <body> 
 
    <form action="" method="post" id="formID"> 
 
     
 
     input <input type="text"> 
 
     
 
     <input type="submit" value="submit"> 
 
     
 
    </form> 
 
    </body> 
 
</html>

источник

2017-02-01 21:30:23

Да. Спасибо, что потрудились. Просто нашел это сообщение: http://meta.stackoverflow.com/questions/339479/advise-that-submit-events-on-forms-does-not-work-on-code-snippets. Следует отметить, что мой код на самом деле отлично работает на моей локальной машине при повторной проверке. Возможно, изначально была опечатка, и тот факт, что блокированные формы SO отбросил меня. Ваш ответ работает, поэтому я соглашусь. Однако для будущих читателей: мне вообще не нужно было менять код, чтобы заставить его работать. –

вам просто нужно написать код, приведенные ниже, как evt.preventDefault() & evt.stopPropagation() оба имеют различное функционирование

'use strict'; 
function handleSubmission(evt) { 
    evt.preventDefault(); 
    alert('hi'); 
}

источник

2017-02-01 19:15:48

Не является ли главная проблема в том, что 'evt.stopPropogation' написана неправильно? –

@Pekka 웃 очень жаль об этом :) –

Ваш код работает с jsfiddle, но не с SO snippets ... https://jsfiddle.net/jpazrjt4/. Infact мой код ORIGINAL работает в jsfiddle: https://jsfiddle.net/jpazrjt4/1/. Возможно ли это ограничение на фрагменты SO? –

-1

прохладных изменений вы код на это и, пожалуйста, звоните JQuery до этого, потому что stoppropogation является частью библиотеки Jquery Может быть, это не будет работать здесь, но пожалуйста, проверьте его на вашей стороне на codepen и т.д., это работает здесь галочку: - http://codepen.io/ermayankrajput/pen/VPXKdN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="" method="post" id="formID"> 
 
     
 
     input <input type="text"> 
 
     
 
     <input type="submit" value="submit"> 
 
     
 
    </form> 
 
<script> 
 
'use strict'; 
 
var form = document.getElementById('formID'); 
 
form.addEventListener('submit',function(evt){ 
 
    evt.preventDefault(); 
 
    evt.stopPropagation(); 
 
    alert('hi'); 
 
}); 
 
</script>

источник

2017-02-01 19:33:37

Даже мой точный оригинальный код работает на codepen и jsfiddle. Просто не здесь, в фрагментах - или в моих браузерах запускается на моем локальном компьютере. –

e.preventDefault и e.stopPropagation является функцией JQuery и только тогда, когда с помощью Jquery LIBS г действует.

Я не могу показаться, чтобы найти способ Vanila JavaScript, чтобы достигнуть того, чтобы вы будете использовать JQuery сейчас

JS как:

function handleSubmission(evt) { 
    evt.preventDefault(); 
    evt.stopPropogation(); 

    alert('hi'); 
} 

var form = document.querySelector('#formID'); 
form.addEventListener('submit', handleSubmission);

и HTML, как:

<!DOCTYPE html> 
<html lang="en-US"> 
    <body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <form action="" method="post" id="formID"> 

     input <input type="text"> 

     <input type="submit" value="submit"> 

    </form> 
    </body> 
</html

Прошел тест

источник

2017-02-01 19:40:08

Это не работает на моей локальной машине ... не уверен, что это будет работать в фрагменте здесь. –

Функция не работает во время отправки формы

ответ

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