Почему так работает?

[oslayer]

Есть код на https://codepen.io/michielvandewalle/pen/oeoMXg

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

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

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

Как только код переносится на живой сайт, e.preventDefault() перестает работать и происходит переход. Почему и как это исправить?

[рони]

Почему

нет элементов с которыми работает скрипт.

как это исправить?

обернуть в load или поставить вниз странцы.

[oslayer]

[quote=рони;500611]нет элементов с которыми работает скрипт.
элементы это

<form id="chomp"....

Вниз страницы и так затолкал

обернуть в load

$(document).ready(function()

вот это ? или как то по другому?

[рони]

вот это ?

да но зачем jquery?

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

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

  });

[oslayer]

сейчас попробую, вот это не работает корректно

<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
        };
    });
};

[laimas]

document.getElementById('chimp').....

[oslayer]

предложенный вами вариант тоже на заработал...

[laimas]

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

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

$(document).ready(function() {
    $('#chimp').submit(function (e) {
	e.preventDefault();
.....

[oslayer]

Всё равно проходит редирект

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

[laimas]

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