Menu
Working with HTML5, I have created a simple table that consists of a series of pair fields (Activity log, time). I've been searching on the web how to dynamically create fields using Javascript, but I've only found how to create one field at a time (using getElementById). The thing is that I'd like to create a series of tags. Meaning, when the user clicks on "add another field", I'd like that JS to generate another row on the table, with a pair of fields, instead of having to hard code the complete table (the snippet below only has two rows, but I'd probably need 10-15 rows).
The snippet of the code for the table appears below. Using CSS the page looks as it's on the screenshot.
I'd appreciate any help. Thanks in advance.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Activity Log</title>
<link href="styles.css" rel="stylesheet">
<script type="text/javascript" language="javascript" src="script.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="leftcol">
<form name='mainForm' id='mainForm' method="get" action="http://www.randyconnolly.com/tests/process.php">
<fieldset>
<legend>Input Activity Logs</legend>
<table id=tracklist>
<tr>
<th colspan="3">Track List: </th>
</tr>
<tr>
<td>1</td>
<td><label>Activity Log: </label><br/><input type="text" name="actlog1" class="required"></td>
<td><label>Time: </label><br/><input type="time" name="time1" class="required"></td>
</tr>
<tr>
<td>2</td>
<td><label>Activity Log: </label><br/><input type="text" name="actlog2" class="required"></td>
<td><label>Time: </label><br/><input type="time" name="time2" class="required"></td>
</tr>
</table>
<input type="submit" />
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
301
asked Jun 17 '16 03:06
createElement() method you can create a specified HTML element dynamically in JavaScript. Once created, you can insert (or add) the element to your web page, or add it to a pre-defined element or a dynamically created element. In fact, you can create an entire form dynamically using this method.
This is the simplest way to modify content dynamically- using the innerHTML property. By using this property, supported in all modern browsers we can assign new HTML or text to any containment element (such as <div> or <span>), and the page is instantly updated and reflowed to show the new content.
DHTML included JavaScript along with HTML and CSS to make the page dynamic. This combo made the web pages dynamic and eliminated this problem of creating static page for each user. To integrate JavaScript into HTML, a Document Object Model(DOM) is made for the HTML document.
New elements can be dynamically created in JavaScript with the help of createElement() method. The attributes of the created element can be set using the setAttribute() method.
Some popular ways to add element:
document.createElement to create element you need, and use document.appendChild or document.insertBefore to add it to html.element.insertAdjacentHTML to add element.
91
You can use the .innerHTML += method wired up to an "Add Activity" button. Each time you click the button a new table row is added with the correct index numbers. Here is a fully working example - for the sake of simplicity and having only one file, I've included the javascript directly in the HTML code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Activity Log</title>
<script>
// Wait until the window finishes loaded before executing any script
window.onload = function() {
// Initialize the activityNumber
var activityNumber = 3;
// Select the add_activity button
var addButton = document.getElementById("add_activity");
// Select the table element
var tracklistTable = document.getElementById("tracklist");
// Attach handler to the button click event
addButton.onclick = function() {
// Add a new row to the table using the correct activityNumber
tracklistTable.innerHTML += '<tr><td>' + activityNumber + '</td><td><label>Activity Log: </label><br/><input type="text" name="actlog' + activityNumber + '" class="required"></td><td><label>Time: </label><br/><input type="time" name="time' + activityNumber + '" class="required"></td></tr>';
// Increment the activityNumber
activityNumber += 1;
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="leftcol">
<form name='mainForm' id='mainForm' method="get" action="#">
<fieldset>
<legend>Input Activity Logs</legend>
<table id="tracklist">
<tr>
<th colspan="3">Track List: </th>
</tr>
<tr>
<td>1</td>
<td><label>Activity Log: </label><br/><input type="text" name="actlog1" class="required"></td>
<td><label>Time: </label><br/><input type="time" name="time1" class="required"></td>
</tr>
<tr>
<td>2</td>
<td><label>Activity Log: </label><br/><input type="text" name="actlog2" class="required"></td>
<td><label>Time: </label><br/><input type="time" name="time2" class="required"></td>
</tr>
</table>
<input type="submit" />
</fieldset>
</form>
<button id="add_activity">Add Activity</button>
</div>
</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With