如何使用Java腳本從文本框中獲取文本的值

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

我創建了以下三個數組。

 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

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>