Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Почему так работает? (https://javascript.ru/forum/dom-window/76236-pochemu-tak-rabotaet.html)

oslayer 16.12.2018 16:28

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

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

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

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

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

рони 16.12.2018 16:35

Цитата:

Сообщение от oslayer
Почему

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

Сообщение от oslayer
как это исправить?

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

oslayer 16.12.2018 16:54

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

<form id="chomp"....
Вниз страницы и так затолкал

обернуть в load
$(document).ready(function()
вот это ? или как то по другому?

рони 16.12.2018 17:00

Цитата:

Сообщение от oslayer
вот это ?

да но зачем jquery?

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

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

  });

oslayer 16.12.2018 17:10

сейчас попробую, вот это не работает корректно
<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 16.12.2018 17:12

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

oslayer 16.12.2018 17:15

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

laimas 16.12.2018 17:23

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

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

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

oslayer 16.12.2018 17:34

Всё равно проходит редирект
<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 16.12.2018 17:41

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


Часовой пояс GMT +3, время: 15:36.