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

Question

I have a requirement where text boxes, which are generated dynamically, display some data on the screen.
The text boxes are editable and if users want to change the content, they can put the enter new data and push it on the server.
I tried sending the data using Forms, however, it is not working, so have to resort to Java Script by capturing the data on client side and then pushing it to the server.

The problem that I'm facing is that the text boxes are generated dynamically and have same ids and tag names.
I'm able to find the count of the text boxes, however not able to find the value of the text boxes. Can some one please help.

My HTML code is

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

On submit button, I'm calling the Update function that will capture the run time values in the text boxes:

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

Something like this:

var capturedValues = {};

Then in your forloop do:

capturedValues[node.name] = node.value;

Finally convert object to JSON string:

var jsonStr = JSON.stringify(capturedValues);

Answer 2

I have created three arrays as below.

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

And constructed a json object postData and stringified the same.

Sample :

 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>