javascript - 如何使用 Javascript 从文本框中获取文本的值

Question

我有一个要求，动态生成的文本框在屏幕上显示一些数据。
文本框是可编辑的，如果用户想改变内容，他们可以输入新的数据并推送到服务器上。
我尝试使用 Forms 发送数据，但是它不起作用，因此必须通过在客户端捕获数据然后将其推送到服务器来求助于 Java Script。

我面临的问题是文本框是动态生成的，并且具有相同的 ID 和标签名称。
我能够找到文本框的数量，但无法找到文本框的值。有人可以帮忙吗。

我的 HTML 代码是

while($row = $result->fetch_assoc()) 
{
    $fieldName[] = $row['fieldName'];
    $fieldText[] = $row['fieldText'];
    $fieldID[]   = $row['ID'];

    if ($_GET['showname']){                                 
        echo"<tr>";
        echo "<td>".$row['fieldName']."</td>";
        echo '<td>'.'<input type = "text" class="form-control" disabled = "disabled" id ="fieldText" name = "fieldText['.$row["ID"].']" value = "'.$row["fieldText"].'">'."</td>";
        //echo "<td>".$row['fieldText']."</td>";
        echo "</tr>";
    }

在提交按钮上，我调用了将捕获文本框中运行时值的更新函数:

function updateVal()
{
    var node_list = document.getElementsByTagName('input');
    var c=0;
    for (var i = 0; i < node_list.length; i++) {
        var node = node_list[i];
        if (node.getAttribute('type') == 'text')
        {

        //Not sure how to extract the value from Text boxes and create a json
         c++;
        }
    }
}

Answer 1

我创建了如下三个数组。

 var fieldName = [];
 var fieldText = []
 var ID = [];

并构建了一个 json 对象 postData 并将其字符串化。

样本:

function updateVal() {
    var node_list = document.getElementsByTagName('input');
    var c = 0;
    var fieldName = [];
    var fieldText = []
    var ID = [];
    for (var i = 0; i < node_list.length; i++) {
        var node = node_list[i];
        if (node.getAttribute('type') == 'text') {
            fieldName[c] = node.name;
            fieldText[c] = node.value;
            ID[c] = node.id;
            c++;
        }
    }
    var postData = {
        fieldName: fieldName,
        fieldText: fieldText,
        ID: ID
    };
    console.log(JSON.stringify(postData));
}

updateVal();

<input type="text" id="text1" name="text1" value="text1value" />
<input type="text" id="text2" name="text2" />
<input type="text" id="text3" name="text3" />
<input type="text" id="text4" name="text4" value="text4value" />

<知识库> JSFiddle