动态创建输入并检索其值以通过Ajax请求发送

时间:2018-08-02 06:23:14

标签: javascript ajax

我需要帮助。 我必须为forEach的所有周期动态创建输入(键入文本),在需要通过ajax请求发送它们之后,我想到了这种解决方案,但它看起来太乱了,而且直到结束..其他解决方案更容易吗?或有关如何修复地雷的建议?

代码在这里:

function visualizzaModifica(array, div)
{
    div.html("");
    div.append("<br>");

    let i=1;

    array.forEach(function (e)
    {
        div.append
        (
            "<div class='input-group'>"+
            "<input type='text' id='inputModificaNome"+i+"' class='form-control' value='"+e.nominativo+"'>"+
            "<input type='text' id='inputModificaCellulare"+i+"' class='form-control' value='"+e.cellulare+"'>"+
            "</div>"
        );

        i++;
    });

    div.append
    (
        "<div class='input-group'>"+
        "<input type='text' id='inputModificaNome"+i+"' class='form-control'>"+
        "<input type='text' id='inputModificaCellulare"+i+"' class='form-control'>"+
        "</div>"
    );

    div.append("<br>");
    div.append("<button id='btnSalvaTeamLeaderProduzione' class='btn btn-secondary'>Salva</button>");
}

$("#divTeamLeaderProduzione").on("click","#btnSalvaTeamLeaderProduzione", function ()
{

    $.ajax
    ({
        url: "/updateTeamLeaderProduzione",
        type: "post",
        data:
            {
                nome1: $("#inputModificaNome1").val(),
                cellulare1: $("#inputModificaCellulare1").val(),
                nome2: $("#inputModificaNome2").val(),
                cellulare2: $("#inputModificaCellulare2").val(),

                HERE I DON'T KNOW HOW TO PASS TO DATA THE NUMBER INDEFINITE
                OF VALUES

            },

        success: function ()
        {
            alert("Ok")
        },

        error: function (msg)
        {
            alert(JSON.stringify(msg));
        }

    });
});

1 个答案:

答案 0 :(得分:0)

{
  nome1: $("#inputModificaNome1").val(),
  cellulare1: $("#inputModificaCellulare1").val(),
  nome2: $("#inputModificaNome2").val(),
  cellulare2: $("#inputModificaCellulare2").val(),
}

你可以做

var obj = {};



for(i=0;i<array.length;i++){
  obj[`nome{i+1}`] = $(`#inputModificaNome{i+1}`).val();
  obj[`cellulare{i+1}`] = $(`#inputModificaCellulare{i+1}`).val();
}