javascript – Close modal if data-success, vanilla-form.js

Question:

<script src="js/vanilla-form.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        var myForm;
        myForm = new VanillaForm(document.querySelector("form.vanilla-form"));
        myForm = new VanillaForm(document.querySelector("form.vanilla-form2"));
        myForm = new VanillaForm(document.querySelector("form.vanilla-form3"));
    });
</script>

<button id="myBtn">Получить памятку</button>

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">x</span>
        <div class="form-container">

            <form action="/standard-contact-form.php" method="post"
                class="vanilla-form3" novalidate="novalidate">

                <input type="text" name="email" placeholder="Ваш email" required>
                <input type="submit" value="Отправить" data-error="Не все заполнено"
                    data-processing="Отправка..." data-success="Спасибо!">
                <footer class="notification-box"></footer>
            </form>
        </div>
    </div>
</div>

With data-success="Спасибо!" needs the modal to close

Answer:

I suggest this option:

myForm = new VanillaForm(document.querySelector("form.vanilla-form3"));
myForm.successForm = function () {
    // Вызов базовой функции
    VanillaForm.prototype.successForm.call(this);

    // Код для закрытия модального окна.
    // Код ниже лишь пример. В реальном приложении лучше использовать функции плагина модального окна
    document.querySelector('#myModal .close').click()
}
Scroll to Top