Данные формы передаются в html-таблицу
Я отправляю данные формы с помощью fetch API и затем хочу показать некоторые значения переменных в таблице HTML. Но это не работает так, как должно быть. Я могу получить данные формы в views.py, но не могу отправить их обратно в HTML-файл, чтобы показать те же данные в таблице. Без отправки данных через API fetch все работает нормально, как мне нужно. Я не могу понять, в чем моя ошибка. Я попытался удалить все ненужные части для отладки. Пожалуйста, дайте мне знать, где я ошибаюсь.
views.py
def home(request):
context={}
if request.method=="POST":
options_value=request.POST['dropdown_val']
value=request.POST['val']
print(options_value,value)
context={"options_value":options_value, "value":value}
return render(request, 'index.html',context)
index.html
<form method="POST" action="" id="form">
{% csrf_token %}
<select
class="form-select"
aria-label="Default select example"
name="options_value"
id="dropdown_val"
>
<option disabled hidden selected>---Select---</option>
<option value="1">Profile UID</option>
<option value="2">Employee ID</option>
<option value="3">Email ID</option>
<option value="4">LAN ID</option>
</select>
<input
type="text"
class="form-control"
type="text"
placeholder="Enter Value"
name="value"
id="value"
/>
<input
class="btn btn-primary"
type="submit"
value="Submit"
style="background-color: #3a0ca3"
/>
</form>
<table style="display: table" id="table">
<tbody>
<tr>
<th scope="row">ProfileUID :</th>
<td>{{options_value}}</td>
</tr>
<tr>
<th scope="row">First Nane :</th>
<td>{{value}}</td>
</tr>
</tbody>
</table>
<script>
let form = document.getElementById("form");
let dropdown_val = document.getElementById("dropdown_val");
let val = document.getElementById("value");
const csrf = document.getElementsByName("csrfmiddlewaretoken")[0].value;
form.addEventListener("submit", (e) => {
e.preventDefault();
const newform = new FormData();
newform.append("dropdown_val", dropdown_val.value);
newform.append("val", val.value);
newform.append("csrfmiddlewaretoken", csrf);
fetch("", {
method: "POST",
body: newform,
})
.then(response => response.text())
.then(data => {
console.log('Success:', data);
})
.catch(error => {
console.error('Error:', error);
});
});
</script>
<<<Вещи в массиве
индексируются по POST
, а не по name
. Вам нужноid
options_value = request.POST['options_value']
не dropdown_val
.
Похоже, что вы никогда не выводите ответ. Быстрым решением будет просто переписать html из javascript каждый раз, когда вы получаете ответ после выполнения POST запроса:
.then(response => response.text())
.then(data => {
console.log('Success:', data);
document.write(data);
})
.catch(error => {
console.error('Error:', error);
});