Почему так работает?
Есть код на https://codepen.io/michielvandewalle/pen/oeoMXg
Работает отлично на именно там. в коде JS есть вот такой кусочек
(function () {
document.getElementsByTagName('form')[0].addEventListener('submit', function (e) {
e.preventDefault();
Должен предотвращать переход по ссылке в случае успешной подписки, так и происходит пока код выполняется на codepen. Как только код переносится на живой сайт, e.preventDefault() перестает работать и происходит переход. Почему и как это исправить? |
Цитата:
Цитата:
|
[quote=рони;500611]нет элементов с которыми работает скрипт.
элементы это Код:
<form id="chomp"....обернуть в load $(document).ready(function()вот это ? или как то по другому? |
Цитата:
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByTagName('form')[0].addEventListener('submit', function (e) {
e.preventDefault();
})
});
|
сейчас попробую, вот это не работает корректно
<main>
<form id="chimp" action="https://made-in-altai.us19.list-manage.com/subscribe/post?u=55cf009edf905bbae51535dda&id=9458b84861" method="post" novalidate>
<h2>Subscribe to our mailing list</h2>
<div id="js-form-inputs">
<div>
<label for="mce-EMAIL">Email Address<sup>*</sup></label>
<input type="email" name="EMAIL" id="mce-EMAIL" value="" placeholder="Email">
</div>
<div>
<label for="mce-FNAME">First Name </label>
<input type="text" name="FNAME" id="mce-FNAME" value="" placeholder="First name">
</div>
<div>
<label for="mce-LNAME">Last Name </label>
<input type="text" name="LNAME" id="mce-LNAME" value="" placeholder="Last name">
</div>
</div>
<!-- honeypot -->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" id="js-validate-robot" name="b_55cf009edf905bbae51535dda_9458b84861" tabindex="-1" value=""></div>
<!-- submit -->
<button type="submit" name="subscribe" id="mc-embedded-subscribe">Subscribe</button>
<!-- response -->
<p id="js-subscribe-response"></p>
</form>
</main>
$( document ).ready(function() {
document.getElementsByTagName('#chimp')[0].addEventListener('submit', function (e)
{
e.preventDefault();
// Check for spam
if(document.getElementById('js-validate-robot').value !== '') { return false }
// Get url for mailchimp
var url = this.action.replace('/post?', '/post-json?');
// Add form data to object
var data = '';
var inputs = this.querySelectorAll('#js-form-inputs input');
for (var i = 0; i < inputs.length; i++) {
data += '&' + inputs[i].name + '=' + encodeURIComponent(inputs[i].value);
}
// Create & add post script to the DOM
var script = document.createElement('script');
script.src = url + data;
document.body.appendChild(script);
// Callback function
var callback = 'callback';
window[callback] = function(data) {
// Remove post script from the DOM
delete window[callback];
document.body.removeChild(script);
// Display response message
document.getElementById('js-subscribe-response').innerHTML = data.msg
};
});
};
|
document.getElementById('chimp').....
|
предложенный вами вариант тоже на заработал...
|
Строка 35 - должно быть });
И уж тогда на чем-то одном:
$(document).ready(function() {
$('#chimp').submit(function (e) {
e.preventDefault();
.....
|
Всё равно проходит редирект
<main>
<form id="chimp1" action="https://made-in-altai.us19.list-manage.com/subscribe/post?u=55cf009edf905bbae51535dda&id=9458b84861" method="post" novalidate>
<h2>Subscribe to our mailing list</h2>
<div id="js-form-inputs">
<div>
<label for="mce-EMAIL">Email Address<sup>*</sup></label>
<input type="email" name="EMAIL" id="mce-EMAIL" value="" placeholder="Email">
</div>
<div>
<label for="mce-FNAME">First Name </label>
<input type="text" name="FNAME" id="mce-FNAME" value="" placeholder="First name">
</div>
<div>
<label for="mce-LNAME">Last Name </label>
<input type="text" name="LNAME" id="mce-LNAME" value="" placeholder="Last name">
</div>
</div>
<!-- honeypot -->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" id="js-validate-robot" name="b_55cf009edf905bbae51535dda_9458b84861" tabindex="-1" value=""></div>
<!-- submit -->
<button type="submit" name="subscribe" id="mc-embedded-subscribe">Subscribe</button>
<!-- response -->
<p id="js-subscribe-response"></p>
</form>
</main>
<script>/*
* Mailchimp AJAX form submit VanillaJS
* Vanilla JS
* Author: Michiel Vandewalle
* Github author: [url]https://github.com/michiel-vandewalle[/url]
* Github project: [url]https://github.com/michiel-vandewalle/Mailchimp-AJAX-form-submit-vanillaJS[/url]
*/
$(document).ready(function() {
$('#chimp1').submit(function (e) {
e.preventDefault();
// Check for spam
if(document.getElementById('js-validate-robot').value !== '') { return false }
// Get url for mailchimp
var url = this.action.replace('/post?', '/post-json?');
// Add form data to object
var data = '';
var inputs = this.querySelectorAll('#js-form-inputs input');
for (var i = 0; i < inputs.length; i++) {
data += '&' + inputs[i].name + '=' + encodeURIComponent(inputs[i].value);
}
// Create & add post script to the DOM
var script = document.createElement('script');
script.src = url + data;
document.body.appendChild(script);
// Callback function
var callback = 'callback';
window[callback] = function(data) {
// Remove post script from the DOM
delete window[callback];
document.body.removeChild(script);
// Display response message
document.getElementById('js-subscribe-response').innerHTML = data.msg
};
};
});
</script>
|
Сначала ошибки исправить, опять та же, строка 72 - })
|
исправил, редиректа нет, поля не очищаются, информации об успешной подписке нет вот здесь.
<p id="js-subscribe-response"></p>
</form>
Как это всё на работает можно глянуть в подвале made-in-altai.ru. кэш чистый |
Цитата:
|
да это mailchimp уже редирект делает на свой домен... а вообще сейчас глянул в ошибки по chromу
(index):2538 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://made-in-altai.us19.list-mana...kdj&LNAME=kdfj with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details. |
Но в исходном на codepen
https://codepen.io/michielvandewalle/pen/oeoMXgвсе ок и не каких тебе CORB |
Цитата:
|
т.е. для codepen у маил чимпа есть разрешение???
|
Цитата:
|
Это не CORS ошибка а CORB
|
Не почту, а добавить в список на маилчимпе почтовый адрес
|
для codepen CORB не всплывает.. на моем сайте вылазит.
|
Цитата:
|
document.body.appendChild(script); матерится вот здесь
|
var script = document.createElement('script');
script.src = url + data;
document.body.appendChild(script);
|
| Часовой пояс GMT +3, время: 00:34. |