时间戳

首页 > 解决方案 > 使用 Javascript 从动态生成的表单中读取数据

javascript - 使用 Javascript 从动态生成的表单中读取数据

问题描述

所以我有一个具有多个生成表单的 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 %}

row[0][1] 包含行的 id。

我试图从它们中的每一个发送ajax请求，但我从每一行获得第一行的相同ID。

这是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);
    }
});

}); });

我知道我是新手，但我真的需要一些帮助

标签： javascripthtmljquerypython-requests

解决方案

这是一个测试您的点击事件的工作示例。click 事件.aggoriorna_app在每个表单内的按钮上，但是传递给 ajax 调用的 id 看起来.val()每次都在抓取，例如$('#id_pratica').val(). 您将在我的示例中看到，当单击按钮时，找到最近的输入值并将 ajax id 设置为该值。我认为这就是你所需要的。

$(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>

推荐阅读