CrossPosting/cms/templates/articles/new.html

{% extends 'base.html' %}
{% load bootstrap5 %}
{% block content %}
    <div class="container">
        <div class="row my-5">
            <div class="col-md-12">
                <h1>Заполните данные статьи для продвижения в соц. сетях</h1>
                <form
                        method="post"
                        enctype="application/x-www-form-urlencoded"
                        action="{% url 'create-article' %}"
                        class="form"
                >
                    {% csrf_token %}
                    {% bootstrap_form new_article_form %}
                    {% buttons %}
                        <button
                                class="btn btn-primary"
                                type="submit"
                        >
                            Продвинуть
                        </button>
                        <div id="vkShare"></div>
                    {% endbuttons %}
                </form>
            </div>
        </div>
    </div>
{% endblock content %}
{% block extra_scripts %}
    <script type="text/javascript">
        const main = () => {
            const appendShare = (e) => {
                const articleLink = e.target.value;
                const gen = {
                    url: articleLink
                }
                const buttonType = {
                    type: "link",
                    text: 'Посмотреть'
                }
                document.getElementById('vkShare').innerHTML = VK.Share.button(gen, buttonType)
            }
            const linkInput = document.querySelector('[name="link"]');
            linkInput.addEventListener('input', appendShare)
            linkInput.addEventListener('paste', appendShare)
        }
        window.addEventListener('DOMContentLoaded', main)
    </script>
{% endblock %}