Значение скрытого поля не определено при отправке после создания с помощью javascript

Я использую django и пытаюсь заставить javascript добавить скрытое поле и затем передать его в представление, чтобы попытаться обработать значение.

Когда я жестко кодирую скрытое поле, используя следующее в моем шаблоне:

<form action="{% url 'add_hamper' hamper_id=hamper.slug %}" method="post" novalidate id="form">
    {% csrf_token %}
    <input type="hidden" name="option_id" id="option_element" value="85">
    <button type="submit" class="btn btn-sm btn-success" id="price_button" data-price="{{ hamper.sale_price }}">{{ hamper.sale_price }}</button>
</form>

Все работает, и я могу видеть значение option_id в моем представлении:

<QueryDict: {'csrfmiddlewaretoken': ['XXXX'], 'option_id': ['85']}>

Однако, когда я начинаю со следующего HTML:

<form action="{% url 'add_hamper' hamper_id=hamper.slug %}" method="post" novalidate id="form">
    {% csrf_token %}
    <button type="submit" class="btn btn-sm btn-success" id="price_button" data-price="{{ hamper.sale_price }}">{{ hamper.sale_price }}</button>
</form>

А затем используйте следующий javascript для добавления скрытого поля. Я знаю, что в данный момент это уродливо, и я, вероятно, мог бы сделать это более лаконичным способом, но я все еще пытаюсь изучить лучшие способы.

let form = document.getElementById('form');
let option_element = document.getElementById('option_element');
if (option_element){
    option_element.remove();
}
let input_elem = document.createElement("input");
input_elem.setAttribute("type", "hidden");
input_elem.setAttribute("name", "option_id");
input_elem.setAttribute("id", "option_element");
input_elem.setAttribute("value", option_id);
form.prepend(input_elem);

В то время как консоль показывает следующее (что выглядит точно так же:

)

<form action="/hampers/add_hamper/premium-nibbles" method="post" novalidate="" id="form">
    <input type="hidden" name="csrfmiddlewaretoken" value="XXXX">
    <input type="hidden" name="option_id" id="option_element" value="85">
    <button type="submit" class="btn btn-sm btn-success" id="price_button" data-price="A$75.00">A$89.19</button>
</form>

Представление показывает следующее:

<QueryDict: {'option_id': ['undefined'], 'csrfmiddlewaretoken': ['XXXX']}>

Я изучаю JS по ходу дела, и это меня несколько озадачило

Почему это работает при жестком кодировании, но не работает при инъекции с помощью JS. Я пытался жестко закодировать скрытое поле и просто обновить значение с помощью JS, но значение все равно возвращается как "undefined".

Вернуться на верх