通过ajax

Question

我有一个表单和一个下拉菜单。下拉菜单列出了项目（1,2,3）。当您选择任何项目时，内容将通过ajax加载。第1项（默认）自动加载到$（document）.ready（）。

我要做的是在用户从项目更改为项目时保存表单的值。例如，第1项有描述。用户编辑描述并更改为项目2后，项目1的描述应保存到数据库中。当用户完成编辑项目并返回到1时，将保存项目2的描述，并加载项目1中的描述。

我现在面临的问题是我正在尝试使用$("#myForm").serialize();获取表单值并将它们传递到save.php页面，但由于输入是通过ajax调用加载的，因此使用

$(document).ready(function(){
    draw_item_meta();
    var vals = $("#myForm").serialize();
}

时

不会产生任何结果

    $("#select_item").on("change", function(){
        save_item_meta(vals);
        draw_item_meta();
    });

选择目标选定项目并添加上一项目的描述。因此，如果我编辑项目1的描述并更改为2，项目1的描述将被保存为项目2的描述。

这里有一些代码：

<script>
$(document).ready(function(){
    draw_item_meta();
    var vals = $("#myForm").serialize();

    $("#select_item").on("change", function(){
        save_item_meta(vals);
        draw_item_meta();
    });
});

function save_item_meta(vals) {

    console.log(vals);
    $.ajax({
        url: "save.php",
        method: "POST",
        data: vals,
        success: function(data) {

        }
    });

    return false; // prevent from submit

}

function draw_item_meta() {
        var ID = $("#select_item").val();
        $.ajax({
           url:"select_item_meta.php",
           type:"POST",
           data: {"ITEMID":ID, "RID":' . $_GET["ID"] . ',},
           success: function(data) {
               $("#lost_meta_box").replaceWith(data)
           }
       });
};

</script>

表格非常大，所以我只是粘贴我想要修改的部分

<form class="form-horizontal" action="save.php" method="POST" id="myForm">
<textarea class="form-control" aria-label="With textarea" name="Desc">' . $r["Desc"] . '</textarea> <!-- $r["Desc"] pulled from db -->
</form>

P.S。我从代码中删除了一些php部分。 data: {"ITEMID":ID, "RID":' . $_GET["ID"] . ',}之类的工作。我的问题是JS，而不是PHP或HTML。

谢谢

编辑：

我找到了一个通过

每隔n秒序列化数据的临时解决方案

var vals = null;
setInterval(function(){
    vals = $("#myForm").serialize();
}, 1000); // 1000 = 1 sec

如果有人有更好的解决方案，请告诉我。