javascript - 有条件地渲染表单的一部分

Question

我有一个表格，如果选择了“新地址”，我只需要输入地址。如果选中了正确的单选按钮，我一直在尝试仅包含此表单，但我无法让它工作。

如果我不转义大括号，js 会中断，但如果我这样做，它会将地址表单呈现为{% include 'partials/form_fields.html' %}而不是实际的表单模板。

我对基于 django 的解决方案持开放态度，但这种逻辑需要在不刷新的情况下完成。

js

var addresslist = document.getElementById("address-list");
    var addressform = "\{% include 'partials/form_fields.html' %\}"
    addresslist.addEventListener("change", function () {
        var address = document.querySelector('input[name="addresses"]:checked').value
        if (address == "new-address") {
            console.log(address)
            document.getElementById('address-form').innerHTML = addressform;
        }
        else {
            console.log(address)
            document.getElementById('address-form').innerHTML = "";
        }
    });

形式

<form method="POST" id="subscription-form" data-secret="{{client_secret}}">
            {% csrf_token %}

            <label class="block uppercase text-gray-600 text-xs font-bold mb-2">Payment Details</label>
            <div class="form-check my-3 bg-gray-200 p-2 rounded-md">
                <input class="form-check-input" type="radio" name="payment-methods" id="add-new-card"
                    value="add-new-card" onclick="addCard()">
                <label class="form-check-label" for="add-new-card">
                    Add new payment method
                </label>

                <div id="new-card" style="display: none;">
                    <label class="block uppercase text-gray-600 text-xs mb-2" for="cardholder-name">
                        Name on Card
                    </label>
                    <input id="cardholder-name"
                        class="mb-2 border-0 px-3 py-3 placeholder-gray-300 text-gray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                        value="{{customer.name}}" detype="text">
                    <!-- placeholder for Elements -->
                    <label class="block uppercase text-gray-600 text-xs  mb-2" for="card-element">
                        Card Details
                    </label>
                    <div id="card-element"
                        class="mb-2 border-0 px-3 py-3 placeholder-gray-300 text-gray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150">
                        <!-- A Stripe Element will be inserted here. -->
                    </div>
                    <div id="card-result"></div>
                    <div id="card-errors" class="my-2" role="alert"></div>

                </div>
            </div>
            {% if saved_customer %}
            {% for method in payment_methods %}
            <div class="form-check my-3 bg-gray-200 p-2 rounded-md">
                <input class="form-check-input" type="radio" name="payment-methods" id="{{method.card}}"
                    value="{{method.id}}" onclick="hideCard()">
                <label class="form-check-label" for="{{method.card}}">
                    {{method.card.brand}} ending in {{method.card.last4}}
                </label>
            </div>
            {% endfor %}

            {% endif %}



            <label class="block uppercase text-gray-600 text-xs font-bold mb-2">Address</label>
            <div id="address-list">
                <div class="form-check my-3 bg-gray-200 p-2 rounded-md">
                    <input class="form-check-input" type="radio" name="addresses" id="new-address" value="new-address">

                    <label class="form-check-label" for="new-address">
                        New Address
                    </label>
                    <div id="address-form">


                    </div>
                </div>

                {% for address in addresses %}
                <div class="form-check my-3 bg-gray-200 p-2 rounded-md">
                    <input class="form-check-input" type="radio" name="addresses" id="{{address.id}}"
                        value="{{address.id}}">
                    <label class="form-check-label" for="{{address.id}}">
                        {{address.name}} - {{address.line_1}}
                    </label>
                </div>
                {% endfor %}
            </div>



            <div>
                <p class="text-xs">By confirming, you agree that you will be charged immediately, and then monthly for
                    this product until cancelled</p>
                <button type="submit" class="w-full mt-2 bg-blue-300 text-blue-900 font-medium rounded p-3">Confirm
                    and Pay</button>
            </div>

        </form>

标签： javascriptdjangodjango-templates