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>";
    }

在提交按钮上，我正在调用Update函数，该函数将捕获文本框中的运行时值：

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 capturedValues = {};

然后在你的forloop中：

capturedValues[node.name] = node.value;

最后将对象转换为JSON字符串：

var jsonStr = JSON.stringify(capturedValues);

Answer 2

我创建了三个数组，如下所示。

undefined

构造了一个json对象var fieldName = []; var fieldText = [] var ID = [];并对其进行了字符串化。

示例：

＆＃13;

postData

＆＃13;

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();

＆＃13;

JSFiddle

Answer 3

   <input type="text" id="myText" value="">
   <p id="out"></p>
   <button onclick="myFunction()">Try it</button>
    <script>
         function myFunction() {
           var txt= document.getElementById("myText").value;
           document.getElementById("out").innerHTML=txt;}
    </script>

如何使用Java Script从文本框中获取文本的值

3 个答案: