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">
        $(document).ready(() => {
            const appendShare = ($element) => {
                const articleLink = $element.val();
                const gen = {
                    url: articleLink
                }
                const renderedButton = VK.Share.button(gen)
                $('#vkShare').html(renderedButton)
            }

            $('[name="link"]').change((e) => {
                appendShare($(e.target))
            })
        })
    </script>
{% endblock %}