How to get the Values of HTML Dynamic user inputs using Javascript

Question

I have these Dynamic user inputs with following types:

Costs: <selection>The user will choose 1 option
Money Input: user input some text.I got after help.

I want Theses 2 values given above.

I want to get the Values of these Dynamic user inputs using JavaScript.

Here the Code given below : Update:solved

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
         border-collapse: collapse;
         }
      </style>
      <script>
         function addMore() {
             var table = document.getElementById("myTable");
             var row = table.insertRow(-1);
             var cell1 = row.insertCell(-1);
             var cell2 = row.insertCell(-1);
         
         var x = document.getElementById("myTable").rows[1].cells;
            
             cell1.innerHTML =  x[0].innerHTML;
             cell2.innerHTML = x[1].innerHTML;
         }
         
         
         function removeLast() {
             document.getElementById("myTable").deleteRow(-1);
         }
         
      </script>
   </head>
   <body>
      <form  action="payroll.php" method="post">
         <table id="myTable">
            <tr>
               <th>Costs</th>
               <th>Money Input</th>
            </tr>
            <tr>
               <td>
                  <select class="mySelect" name="DESCR" >
                     <option  disabled="" selected="">Select</option>
                     <option value="BASIC PAY">BASIC PAY</option>
                     <option  value="GAS BILL">GAS BILL</option>
                     <option  value="CLUB">CLUB</option>
                     <option  value="MEDICINE">MEDICINE</option>
                     <option  value="BANK LOAN">BANK LOAN</option>
                  </select>
               </td>
               <td> <input type="text" name="ALAMT"></td>
            </tr>
         </table>
         
      </form>
      <br>
      <button onclick="addMore()">Add More</button>
      <button onclick="removeLast()">Remove</button>
      <button onclick="myFunction()">Try it</button>
   </body>
   <script>
      function myFunction() {
      
var select = document.getElementById("myTable").rows[1].cells[0].firstElementChild;
  var selectValue = select.options[select.selectedIndex].value;
  var ocell = document.getElementById("myTable").rows[1].cells[1];
  alert("Selected Index: "+selectValue+"\nInput value: "+ocell.firstElementChild.value);
  
        
      }
   </script>
</html>

Using this code every i get errors.But i want the <option> value that is only chosen by the user, instead off all.

Please suggest me how can i do this or more better alternatives to do it. please let me know for any further information.Thanks

Zakaria Acharki · Accepted Answer · 2015-12-28 11:29:41Z

1

You get the HTMLTableCellElement object since you don't specify what you want to get from the cells[0], should add .textContent to if you want to get the text inside the column :

document.getElementById("myTable").rows[1].cells[0].textContent

Or .innerHTML if you want to get the HTML inside the column :

document.getElementById("myTable").rows[1].cells[0].innerHTML

If you want to get the selected option form the select by the user in 'Costs' select, i suggest to use classes .mySelect instead id="mySelect" since the id should be unique in same document, and use querySelector e.g :

var costs = document.querySelector('#myTable tr:nth-child(2) td:nth-child(1) .mySelect option:checked').value;
var money = document.querySelector('#myTable tr:nth-child(2) td:nth-child(2) input").value;

Hope this helps.

function addMore() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(-1);
  var cell1 = row.insertCell(-1);
  var cell2 = row.insertCell(-1);

  var x = document.getElementById("myTable").rows[1].cells;

  cell1.innerHTML =  x[0].innerHTML;
  cell2.innerHTML = x[1].innerHTML;
}


function removeLast() {
  document.getElementById("myTable").deleteRow(-1);
}

function myFunction() {
  var costs = document.querySelector('#myTable tr:nth-child(2) td:nth-child(1) .mySelect option:checked').value;
  var money = document.querySelector('#myTable tr:nth-child(2) td:nth-child(2) input').value;  

  document.getElementById('result').textContent = costs+' - '+money;
}

table, th, td {
  border-collapse: collapse;
}

<form action="payroll.php" method="post">
  <table id="myTable">
    <tr>
      <th>Costs</th>
      <th>Money Input</th>
    </tr>
    <tr>
      <td>
        <select class="mySelect" name="DESCR" >
          <option  disabled="" selected="">Select</option>
          <option value="BASIC PAY">BASIC PAY</option>
          <option  value="GAS BILL">GAS BILL</option>
          <option  value="CLUB">CLUB</option>
          <option  value="MEDICINE">MEDICINE</option>
          <option  value="BANK LOAN">BANK LOAN</option>
        </select>
      </td>
      <td> <input type="text" name="ALAMT"></td>
    </tr>
  </table>

</form>
<br>
<button onclick="addMore()">Add More</button>
<button onclick="removeLast()">Remove</button>
<button onclick="myFunction()">Try it</button>
<br>
<span id='result'></span>

edited Dec 28, 2015 at 11:29

answered Dec 28, 2015 at 10:30

Zakaria Acharki

67.5k15 gold badges78 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user5005768-hd Over a year ago

Thanks @Zakaria Acharki for reply.But I want only the selected option form the select by the user in 'Costs' Drop Down and the user inserted value in the 'Money Input' Field.Please suggest me.Thanks.

user5005768-hd Over a year ago

Thanks @Zakaria Acharki for reply.But still it is not showing user given inputs only.Thanks.

Zakaria Acharki Over a year ago

Glad i can help, it's my fault, should use nth-child instead of eq.

Sunil B N · Accepted Answer · 2015-12-28 10:57:37Z

1

  var select = document.getElementById("myTable").rows[1].cells[0].firstElementChild;
  var selectValue = select.options[select.selectedIndex].value;
  var ocell = document.getElementById("myTable").rows[1].cells[1];
  alert("Selected Index: "+selectValue+"\nInput value: "+ocell.firstElementChild.value);

answered Dec 28, 2015 at 10:57

Sunil B N

4,2251 gold badge33 silver badges53 bronze badges

8 Comments

user5005768-hd Over a year ago

Thanks @Sunil B N for the reply. But i actually want to take input that is only chosen by the user from the given list for Costs field and input value inserted by the user in Money Value field.Thanks again.

Sunil B N Over a year ago

ocell.firstElementChild.value gives Money value field

user5005768-hd Over a year ago

Thanks @Sunil B N for the reply.it worked for the 2nd one.How about the 1st input [the list].Do you have any idea.Thanks.

Sunil B N Over a year ago

var select = document.getElementById("myTable").rows[1].cells[0].firstElementChild; var selectValue = select.options[select.selectedIndex].value;

Sunil B N Over a year ago

Brother, you seriously need to learn some programming basics and come back here. NO OFFENSE intended.

|

Collectives™ on Stack Overflow

How to get the Values of HTML Dynamic user inputs using Javascript

2 Answers 2

3 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related