create dynamic object from dynamic table input text box in JavaScript

Question

I have a table which has dynamic rows of input text boxes. Need to save these dynamic textbox values to an object.

textbox names and values are below : first_textbox : names : name1, name2, name3....etc second_texbox : school1, school2,school3.. etc... third_textbox : branch1, branch2,.... etc

var n = 10;
var myObject = {};

for (i=1; i<n; i++) {
  var saveName = "name"+i;
  var saveSchool = "School"+i;
  var saveBranch = "branch"+i;

  var saveName = document.getElementById("saveName").value;
  var saveSchool = document.getElementById("saveSchool").value;
  var saveBranch = document.getElementById("saveBranch").value;
  myObject { Name: saveName, School: saveSchool, Branch: saveBranch);
}

so at the end the myObject should have 10Names, 10Schools, 10Branches....

Could anyone give me a suggection?

Can you confirm? you want to create dynamic objects using these many textboxes jsfiddle.net/93x7y60g — Sivakumar Tadisetti
– Sivakumar Tadisetti, Commented Aug 22, 2018 at 12:31
<div> <table> <tr> <td> Name1<input type="text" id = "name1"> </td> <td> school11<input type="text" id = "school1"> </td> <td> branch1<input type="text" id = "branch1"> </td> </tr> <tr> <td> Name2<input type="text" id = "name2"> </td> <td> school2<input type="text" id = "school2"> </td> <td> branch2<input type="text" id = "branch2"> </td> </tr> <tr> <td> Name3<input type="text" id = "name3"> </td> <td> school13<input type="text" id = "school3"> </td> <td> branch3<input type="text" id = "branch3"> </td> </tr> </table></div> — user3280899
– user3280899, Commented Aug 22, 2018 at 14:04
I've posted one answer, please check once whether that one solved your issue or not? — Sivakumar Tadisetti
– Sivakumar Tadisetti, Commented Aug 22, 2018 at 14:42

Sivakumar Tadisetti · Accepted Answer · 2018-08-23 03:40:02Z

With your following HTML code given in comments, you can do like below

var result = [];

function storeResult() {
  var noOfRows = document.querySelector('tbody').children.length;
  for (var i = 1; i <= noOfRows; i++) {
    result.push({
      name: document.getElementById('name' + i).value,
      school: document.getElementById('school' + i).value,
      branch: document.getElementById('branch' + i).value
    });
  }
  console.log(result);
}

<div>
  <table>
    <tr>
      <td> Name1<input type="text" id="name1"> </td>
      <td> school11<input type="text" id="school1"> </td>
      <td> branch1<input type="text" id="branch1"> </td>
    </tr>
    <tr>
      <td> Name2<input type="text" id="name2"> </td>
      <td> school2<input type="text" id="school2"> </td>
      <td> branch2<input type="text" id="branch2"> </td>
    </tr>
    <tr>
      <td> Name3<input type="text" id="name3"> </td>
      <td> school13<input type="text" id="school3"> </td>
      <td> branch3<input type="text" id="branch3"> </td>
    </tr>
  </table>
</div>

<button onclick="storeResult()">Store Result</button>

Update

As AmmoPT said, you can do like below to gather data in single object

var singleObj = {};

function storeResult() {
  var noOfRows = document.querySelector('tbody').children.length;
  for (var i = 1; i <= noOfRows; i++) {
    singleObj['name' + i] = document.getElementById('name' + i).value,
    singleObj['school' + i] = document.getElementById('school' + i).value,
    singleObj['branch' + i] = document.getElementById('branch' + i).value
  }
  console.log(singleObj);
}

<div>
  <table>
    <tr>
      <td> Name1<input type="text" id="name1"> </td>
      <td> school11<input type="text" id="school1"> </td>
      <td> branch1<input type="text" id="branch1"> </td>
    </tr>
    <tr>
      <td> Name2<input type="text" id="name2"> </td>
      <td> school2<input type="text" id="school2"> </td>
      <td> branch2<input type="text" id="branch2"> </td>
    </tr>
    <tr>
      <td> Name3<input type="text" id="name3"> </td>
      <td> school13<input type="text" id="school3"> </td>
      <td> branch3<input type="text" id="branch3"> </td>
    </tr>
  </table>
</div>

<button onclick="storeResult()">Store Result</button>

Perfect. Thank you so much. You are a JavaScript lover! Happy Monday!!
@user3280899 you're welcome and glad to hear that the answer helpful to you ;-)

AmmoPT · Accepted Answer · 2018-08-22 11:16:47Z

1

Use bracket notation to add dynamic properties and values to object:

myObject { Name: saveName, School: saveSchool, Branch: saveBranch);

Becomes

var name = 'Name'+i;
var school = 'School'+i;
var branch = 'Branch'+i;
myObject[name] = saveName;
myObject[school] = saveSchool;
myObject[branch] = saveBranch;

Also

for (i=1; i<n; i++)

Should be

for (i=1; i<=n; i++)

Else i will only ever go from 1 to 9, never 10.

answered Aug 22, 2018 at 11:16

AmmoPT

9681 gold badge9 silver badges16 bronze badges

2 Comments

user3280899 Over a year ago

Thanks for your reply. yes, I know it. this is a typo mistake! but how do i loop to get the document.getElementById(textboxid).values to the object?

AmmoPT Over a year ago

You already have it in your original code. Replace the line of code I quoted from your original post with the code I gave you. saveName, saveBranch and saveSchool are already defined above, in the loop.

Collectives™ on Stack Overflow

create dynamic object from dynamic table input text box in JavaScript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related