Jquery: val() возвращает значение параметра value поля input, а не введенное значение
опишу вкратце алгоритм работы. По клику на любое поле таблицы появляется поповер, содержимое которого подтягивается из соответствующего ему <div> элемента. В поповере содержится форма для изменения значения таблицы. По клику на сабмит кнопку делается ajax колл. Проблема в том, что вместо возвращения значения, введенного в input поле, возвращается значение, которое является пре-филлером для поля. Я сто раз проверил, все id - уникальные. Input поле трекается правильно, я могу вернуть значения его параметров без каких-либо проблем и после 2 дней я уже не понимаю что может быть не так.
Вот HTML:
{% for cleaning in cleaning_list %}
<tr>
<td class="text-md-center with-popover" name="name" value="{{cleaning.id}}">
{{ cleaning.name }}
<div id="name{{cleaning.id}}" style="display: none">
<form method="POST" id="form_frequency{{cleaning.name}}">
{% csrf_token %}
<label for="cleaning_name">Название: </label>
<input id="cleaning_name{{cleaning.id}}" type="text" name="cleaning{{cleaning.name}}" value="{{ cleaning.name }}">
<button type="submit" class="btn btn-success btn-sm update-cleaning" name="cleaning_name" data-model="Cleaning" data-field="name" value="{{cleaning.id}}"> Обновить </button>
</form>
</div>
</td>
<td class="text-md-center with-popover" name="difficulty" value="{{cleaning.id}}">
{{ cleaning.difficulty }}
<div id="difficulty{{cleaning.id}}" style="display: none">
<form method="POST" id="form_frequency{{cleaning.difficulty}}">
{% csrf_token %}
<label for="cleaning_difficulty">Сложность: </label>
<input id="cleaning_difficulty{{cleaning.id}}" type="text" name="difficulty{{cleaning.difficulty}}" value="{{ cleaning.difficulty }}">
<button type="submit" class="btn btn-success btn-sm update-cleaning" name="cleaning_difficulty" data-model="Cleaning" data-field="difficulty" value="{{cleaning.id}}"> Обновить </button>
</form>
</div>
</td>
<td class="text-md-center with-popover" name="frequency" value="{{cleaning.id}}" >
{{ cleaning.frequency }}
<div id="frequency{{cleaning.id}}" style="display: none">
<form method="POST" id="form_frequency{{cleaning.id}}">
{% csrf_token %}
<label for="cleaning_frequency">Частота: </label>
<input name="cleaning_frequency" type="text" id="cleaning_frequency{{cleaning.id}}" value="{{cleaning.frequency}}">
<button type="submit" class="btn btn-success btn-sm update-cleaning" name="cleaning_frequency" data-model="Cleaning" data-field="frequency" value="{{cleaning.id}}"> Обновить </button>
</form>
</div>
</td>
</tr>
{% empty %}
<tr>
<td colspan="7" class="text-center bg-warning">Видов уборок пока-что нет :( Скорее добавь какую-нибудь</td>
</tr>
{% endfor %}
Вот скрипт который отвечает за сбор данных из формы и отправку их на сервер:
$(document).on("click", ".update-cleaning", function(event){
event.preventDefault();
var obj_id = $(this).attr('value');
var input_field_name = $(this).attr('name');
var model_name = $(this).attr('data-model');
var field_name = $(this).attr('data-field');
var input = $("#" + input_field_name + obj_id).val();
if (!input) {
alert('Заполните поле!')
}
else {
$.ajax({
url: "{% url 'ajax_update_cleaning' %}",
type: "POST",
data: {'object_id': obj_id, 'model_name': model_name, 'field_name': field_name, 'value': input, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
dataType: 'json',
})
.done(function(response){
console.log(response);
})
}
});