I am developing a form that allows users to add as many rows as needed. Each input is being treated as an array for easy data storage in the database, which is a new concept for me.
$(document).ready(function() {
var maxField = 10; //Limitation on number of input fields
var addButton = $('.add_button'); //Selector for add button
var wrapper = $('.field_wrapper'); //Wrapper for input fields
var fieldHTML = '<tr> <td><input type="text" id="NombreProyecto" name="NombreProyecto[]"></td> <td><input type="text" id="Descripcion" name="Descripcion[]"></td> <td><input type="text" id="AplicacionesProyecto" name="AplicacionesProyecto[]"></td> <td style="width: auto"> <div class="range-field "> <input type="range" name="NivelTRL[]" min="1" value="1" max="9" /> </div> </td> </tr>'; //HTML for new input field
var x = 1; //Initial field counter set to 1
$(addButton).click(function() {
if (x < maxField) {
x++;
$(wrapper).append(fieldHTML);
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="step-content">
<div class="container">
<div id="table" class="table-editable ">
<table class="table field_wrapper">
<tr>
<th>Name</th>
<th>Description</th>
<th>Applications</th>
<th>TRL Level</th>
<th><a href="javascript:void(0);" class="add_button tooltipped" data-position="right" data-tooltip="Add new row"><i class="material-icons">add</i></a>
</th>
</tr>
<tr class="">
<td><input type="text" id="NombreProyecto" name="NombreProyecto[]"></td>
<td><input type="text" id="Descripcion" name="Descripcion[]"></td>
<td><input type="text" id="AplicacionesProyecto" name="AplicacionesProyecto[]"></td>
<td>
<div class="range-field">
<input type="range" name="NivelTRL[]" min="1" value="1" max="9" />
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
While everything seems fine, there is an issue with the range input when a new row is added. The interaction with the range input does not provide feedback on the selected value to the user, unlike the original one with the tooltip.
Upon testing, it was found that this issue also affects the 'tooltipped' class used to display tooltips on elements.
You can view the CodePen here. It demonstrates the problem described above.
To reproduce the issue:
In the provided CodePen, click on the blue cross icon to add a new row.
Interact with the first range input to see the value displayed in the tooltip.
Try interacting with the later added range input, and notice that the tooltip does not show the value.
Thank you for taking the time to read this. Have a wonderful day!