How to populate an html table with Javascript form elements?

Question

How to populate an html table with Javascript form elements?

8.6k views Asked by sTr8_Struggin At 23 November 2014 at 05:06

Essentially I want to display 10 lines of a table and have them update with people's names as they submit forms. So essentially I need to write the form inputs to the table cells. WHen more than 10 people fill out the form I want the table to only show 10 so it will bump one of the earlier ones. So far this is what I am trying but I don't really know how to proceed.

<html>
<h2>Change Our Lights:</h2>
<form name="leds" id="ledSend" method="get" target="_blank" action="https://agent.electricimp.com/Fk43xPMkSrWF">
Lamp Control: <input type="radio" name="led" value="0" checked>Off
              <input type="radio" name="led" value="1">On<br>
How long should the Lights stay on? <input type="text" name="timer" value="10">seconds<br>
Your name? For Our Records <input id="name" type="text" name="user" placeholder="Your name here"<br>
<br>
<input type="submit" value="Update!" onclick="updateTable();return false;"/>
</form>

<script type="text/javascript">
 function updateTable(){
     if (!document.getElementsByTagName) return;
     tabBody=document.getElementsByTagName("tbody").item(0);
     row=document.createElement("tr");
     cell1 = document.createElement("td");
     textnode1=document.forms['leds'].elements[3].value;
     cell1.appendChild(textnode1);
     row.appendChild(cell1);
     tabBody.appendChild(row);
 }
</script>

<body>
<h1>Who has Changed Our Lights?</h1>
<table border='1' id='mytable'>
<tbody>
<tr>"This Could Be You"</tr>
</tbody>
</table>
</body>

</html>

I can't get the form elements to appear in the table at all.

Original Q&A

There are 1 answers

**vernonner3voltazim** · Accepted Answer · 2014-11-23 15:37:10

Your HTML had some typos and other problems. Your JavaScript was on the right track, but overly complicated (and generally it is good practice to put all of it in the head section of the HTML). Here is a workable test-page:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Test Page</title>

  <script type="text/javascript"> <!--

 var tabBody, row, cell;
 function updateTable(){
     tabBody=document.getElementById("editable");
     row=document.createElement("tr");
     cell = document.createElement("td");
     cell.innerHTML=document.forms['leds'].elements[3].value;
     row.appendChild(cell);
     if(tabBody.childNodes.length==10)
       tabBody.removeChild(tabBody.childNodes[0])
     tabBody.appendChild(row);
 }

  // -->
  </script>
</head>
<body>

<h2>Change Our Lights:</h2>
<!-- <form name="leds" id="ledSend" method="get" target="_blank" action="https://agent.electricimp.com/Fk43xPMkSrWF"> -->
<form name="leds" id="ledSend" action="" onsubmit="return false;">
Lamp Control: <input type="radio" name="led" value="0" checked />Off
              <input type="radio" name="led" value="1" />On<br>
How long should the Lights stay on? <input type="text" name="timer" value="10" />seconds<br>
Your name? For Our Records <input id="name" type="text" name="user" placeholder="Your name here" /><br>
<br>
<input type="submit" value="Update!" onclick="updateTable();return false;"/>
</form>

<h1>Who has Changed Our Lights?</h1>

<table border='1'>
<thead><tr><th>This Could Be You</th></tr></thead>
<tbody id="editable"></tbody>
</table>

</body>
</html>

TechQA.

How to populate an html table with Javascript form elements?

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in FORMS

Related Questions in HTML-TABLE

Related Questions in AUTO-POPULATE

Popular Questions

Popular Tags

Trending Questions