Считывание данных из динамически создаваемых форм с помощью Javascript

#javascript #html #jquery #python-requests

Вопрос:

итак, у меня есть HTML-страница с несколькими сгенерированными формами:

 {% for row in data %}
    <form action="/aggiorna_pratica" method='POST' id="inserisci_app_{{ row[0][1] }}">
       <input name="id_pratica_{{ row[0][1] }}" type='hidden 'id="id_pratica_{{ row[0][1] }}" value="{{ row[0][1] }}"></input> 

       <button type="submit" class="btn btn-success aggiorna_app">
          <i class="fa fa-check"></i>
       </button>
    </form>
{% endfor %}
 

строка[0][1] содержит идентификатор строки.

Я пытаюсь отправлять ajax-запросы от каждого из них, но я получаю один и тот же идентификатор первой строки из каждой строки.

Это Javascript

 $(document).ready(function() { $(".aggiorna_app").click(function(event) { 
//prevent submit
event.preventDefault(); //Thx @alex

//do things on submit
$.ajax({
    data : {
        tipo_richiesta : "inserisci_intervento",
        id : $('#id_pratica').val(),
        data_int : $('#data_int').val(),
        ora_int : $('#ora_int').val()
    },
    type: "POST",
    url: "/aggiorna_pratica",
    beforeSend: function(){
        //Before send data
    },
    success: function(data){
        console.log(data);
    }
});
 

});
});

Я знаю, что я новичок, но мне действительно не помешала бы помощь

Ответ №1:

Вот рабочий пример для проверки вашего события щелчка. Событие щелчка находится на .aggoriorna_app кнопках внутри каждой формы, но идентификатор, передаваемый в вызов ajax, похоже .val() , захватывается каждый раз, например,. $('#id_pratica').val() В моем примере вы увидите, что при нажатии кнопки найдите ближайшее входное значение и установите для идентификатора ajax это значение. Я предполагаю, что это то, что вам нужно.

 $(document).ready(function() { 
        $(".aggiorna_app").click(function(event) { 
            //prevent submit
            event.preventDefault(); //Thx @alex
    
            var id = $(this).parent().find('input').val();
            alert(id);
        });
    }); 
 form {
  margin-bottom: 3rem;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <form action="/aggiorna_pratica" method='POST' id="inserisci_app_{{ row[0][1] }}">
        <input name="id_pratica_{{ row[0][1] }}" type='hidden 'id="id_pratica_1" value="input_1"></input> 
        <button type="submit" class="btn btn-success aggiorna_app">
            <i class="fa fa-check"></i>CLICK ME
        </button>
    </form>
    <form action="/aggiorna_pratica" method='POST' id="inserisci_app_{{ row[0][1] }}">
        <input name="id_pratica_{{ row[0][1] }}" type='hidden 'id="id_pratica_2" value="input_2"></input> 
        <button type="submit" class="btn btn-success aggiorna_app">
            <i class="fa fa-check"></i>CLICK ME
        </button>
    </form>
    <form action="/aggiorna_pratica" method='POST' id="inserisci_app_{{ row[0][1] }}">
        <input name="id_pratica_{{ row[0][1] }}" type='hidden 'id="id_pratica_3" value="input_3"></input> 
        <button type="submit" class="btn btn-success aggiorna_app">
            <i class="fa fa-check"></i>CLICK ME
        </button>
    </form>
</div> 

Комментарии:

1. Идентификатор-это просто уникальный номер для каждой формы, но каждый раз, когда функция возвращает только тот, который находится в начале списка(только идентификатор первой формы, даже если я нажимаю кнопку «Отправить» в других формах),. aggiorna_app-это просто функция, которая отправляет данные форм(все остальные параметры находятся в форме, я просто не вставлял ее сюда, но, если вам это нужно, я это сделаю).

2. И да, это просто опечатка, в коде нет такой ошибки.

3. Я обновил свой ответ. Я предполагаю, что идентификатор ajax должен быть уникальным каждый раз, но ваш идентификатор выглядит так, как будто он имеет одинаковое значение, независимо от того, какая кнопка нажата.