How to populate an html table with Javascript form elements?

Question

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.

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

1

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>

answered Nov 23, 2014 at 15:37

vernonner3voltazim

7866 silver badges5 bronze badges

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

3 Comments

sTr8_Struggin Over a year ago

Is there a way to make this table appear to all viewers of the page as people update it without using AJAX?

vernonner3voltazim Over a year ago

@sTr8_Struggin --I'm not following you; the test page is not using AJAX right now. It's not even communicating with a web server, because for testing the JavaScript I didn't need to do that, so see the form tag that is commented out, compared to the one I wrote for testing. (If enabled, the server would receive the user's lighting choices.) The only assumption is that this particular page is accessible from some web site, just like any other ordinary web page (just needs a file-name where it is saved on the server, and a link to it from some other web page, perhaps the home page).

vernonner3voltazim Over a year ago

On thinking more about what you asked, perhaps your question is about anyone who is viewing the page seeing an updated page as OTHERS submit light-changing requests to the web server. OK, if that is what you are asking, then YES, you need to study up on "Server Sent Events". I haven't done enough with that to offer an exact suggestion (also note that IE doesn't support it, while other browsers do), but it is practically an ideal answer for the question you might be asking.

Collectives™ on Stack Overflow

How to populate an html table with Javascript form elements?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related