Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.12.2018, 16:28
Аспирант
Отправить личное сообщение для oslayer Посмотреть профиль Найти все сообщения от oslayer
 
Регистрация: 18.10.2012
Сообщений: 63

Почему так работает?
Есть код на https://codepen.io/michielvandewalle/pen/oeoMXg

Работает отлично на именно там. в коде JS есть вот такой кусочек

(function () {
    document.getElementsByTagName('form')[0].addEventListener('submit', function (e) {
        e.preventDefault();

Должен предотвращать переход по ссылке в случае успешной подписки, так и происходит пока код выполняется на codepen.

Как только код переносится на живой сайт, e.preventDefault() перестает работать и происходит переход. Почему и как это исправить?
Ответить с цитированием
  #2 (permalink)  
Старый 16.12.2018, 16:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от oslayer
Почему
нет элементов с которыми работает скрипт.
Сообщение от oslayer
как это исправить?
обернуть в load или поставить вниз странцы.
Ответить с цитированием
  #3 (permalink)  
Старый 16.12.2018, 16:54
Аспирант
Отправить личное сообщение для oslayer Посмотреть профиль Найти все сообщения от oslayer
 
Регистрация: 18.10.2012
Сообщений: 63

[quote=рони;500611]нет элементов с которыми работает скрипт.
элементы это
Код:
<form id="chomp"....
Вниз страницы и так затолкал

обернуть в load
$(document).ready(function()
вот это ? или как то по другому?
Ответить с цитированием
  #4 (permalink)  
Старый 16.12.2018, 17:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от oslayer
вот это ?
да но зачем jquery?

document.addEventListener('DOMContentLoaded', function() {

document.getElementsByTagName('form')[0].addEventListener('submit', function (e) {
         e.preventDefault();
})

  });
Ответить с цитированием
  #5 (permalink)  
Старый 16.12.2018, 17:10
Аспирант
Отправить личное сообщение для oslayer Посмотреть профиль Найти все сообщения от oslayer
 
Регистрация: 18.10.2012
Сообщений: 63

сейчас попробую, вот это не работает корректно
<main>
    <form id="chimp" action="https://made-in-altai.us19.list-manage.com/subscribe/post?u=55cf009edf905bbae51535dda&amp;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
        };
    });
};
Ответить с цитированием
  #6 (permalink)  
Старый 16.12.2018, 17:12
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

document.getElementById('chimp').....
Ответить с цитированием
  #7 (permalink)  
Старый 16.12.2018, 17:15
Аспирант
Отправить личное сообщение для oslayer Посмотреть профиль Найти все сообщения от oslayer
 
Регистрация: 18.10.2012
Сообщений: 63

предложенный вами вариант тоже на заработал...
Ответить с цитированием
  #8 (permalink)  
Старый 16.12.2018, 17:23
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Строка 35 - должно быть });

И уж тогда на чем-то одном:

$(document).ready(function() {
    $('#chimp').submit(function (e) {
	e.preventDefault();
.....
Ответить с цитированием
  #9 (permalink)  
Старый 16.12.2018, 17:34
Аспирант
Отправить личное сообщение для oslayer Посмотреть профиль Найти все сообщения от oslayer
 
Регистрация: 18.10.2012
Сообщений: 63

Всё равно проходит редирект
<main>
    <form id="chimp1" action="https://made-in-altai.us19.list-manage.com/subscribe/post?u=55cf009edf905bbae51535dda&amp;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>
Ответить с цитированием
  #10 (permalink)  
Старый 16.12.2018, 17:41
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сначала ошибки исправить, опять та же, строка 72 - })
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
AddEventListener не правильно работает с классами Flakky Events/DOM/Window 2 27.05.2016 13:51
Почему так работает, а по-другому нет? ogurchik Общие вопросы Javascript 2 10.09.2015 18:08
Подскажите пожалуйста почему не работает. gheka Общие вопросы Javascript 7 11.02.2012 22:07
Анимация. Помогите понять почему не работает. kadurban jQuery 4 08.07.2010 20:50
Почему это работает? (инклуд JS в JS) Василий Б. Общие вопросы Javascript 4 11.06.2010 12:41