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.
1 answers
solution1
1 ACCPTED 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.