Question

它闻起来像一个微不足道的但却无法弄明白。我有一个html表单，由JS动态生成，并填充从服务器获取的初始数据，DB作为参数传递给displayResForm。使用填充数据正确显示表单。现在，我希望能够通过此表单修改此数据，并以JSON格式将其发回数据库，但问题是我无法捕获html表单中的JavaScript表单数据}。

表格基础如下：

<form method="POST" id="res-form" name="modForm" onSubmit="modSubmit()">
        {% csrf_token %}
</form>

它构建于：

function displayResForm(results) {
    var form = document.getElementById("res-form");

    for (var i = 0; i < results.length; i++) {
        var input = document.createElement("input");
        input.setAttribute("type", "number");
        input.setAttribute("value", results[i][1]);
        input.setAttribute("id", toString(i));
        var label = document.createElement("label");
        label.setAttribute("for", toString(i));
        label.appendChild(document.createTextNode(results[i][0]));

        form.appendChild(label);
        form.appendChild(input);
        form.appendChild(document.createElement("br"));
    }

    var mod = document.createElement("input");
    mod.setAttribute("class", "btn btn-info");
    mod.setAttribute("type", "submit");
    mod.setAttribute("value", "Modify");
    mod.setAttribute("onclick", "modSubmit()");
    form.appendChild(mod);
}

正如你所看到的，我有两个modSubmit的调用（一个在表单标签中，另一个在提交按钮中），但都不起作用。我想抓住它（将POST请求发送到服务器，尚未实现）：

function modSubmit() {
    //var formData = JSON.stringify($("modForm").serializeArray());
    var formData = $('modForm').serializeArray()
    console.log("formData=", formData);
    alert(formData);
    // todo POST back to server
    return false;
}

问题是我一直空着formData ......

修改

我可以通过

手动轻松获取元素的值

var x = document.getElementById("res-form");
var el = x.elements[1].value;
alert(el);

但我希望单行。

Answer 1

您遇到的问题出在以下行中使用的选择器中：

var formData = $('modForm').serializeArray()
__________________^^^^^^^

此行尝试选择名为modForm的标记，而不是名称等于modForm的元素。

相反，您可以使用以下方式选择表单：

var formData = $('[name="modForm"]').serializeArray();
//Or also using the id attribute
var formData = $('#res-form').serializeArray();

希望这有帮助。

在JS中获取html表单数据

1 个答案: