Injecting input fields into existing HTML Form
Im trying to make a form which will be adding a new inputs whenever the user fill another input. I set up an event listener that will do ajax request into my back-end and, if succeed, it will bring an element of input that will be injected into the form. it looked like this :
$.ajax({
type: "GET",
url: "{% url 'cart:get-delivery' %}",
data :{
city : id
},
success: function(res) {
$("#delivery").replaceWith(res.component)
$('.spinner-overlay').remove();
},
error: function(e) {
console.log("Failed")
$('.spinner-overlay').remove();
}
})
the form works on the surface, but when I submit the form, it won't recognize my newly added input fields. so when I do request.POST.get('example') it won't appear. does anyone have solution on this? also here is the added element :
{% load humanize %}
{% if content %}
<td id="delivery">
{% for ins in content %}
{% for jenis in ins.costs %}
<div class="form-check">
<input class="form-check-input" type="radio" name="radio-delivery" id="{{ins.code}}" value="{{jenis.cost.0.value}}|{{ins.code}}|{{jenis.service}}">
<label class="form-check-label" for="radio-delivery">
<strong>{{ins.code | upper}}</strong> - {{jenis.service}} : Rp {{jenis.cost.0.value | intcomma}}
</label>
</div>
{% endfor %}
{% endfor %}
</td>
{% endif %}