1.0.1 • Published 8 years ago
jquery-eternal v1.0.1
Eternal Tables
Automatically expand form tables with additional rows when all required fields have been filled in. Name attributes are automatically transformed to array-like syntax (for use with PHP, jQuery Serialize Object, etc).
Install with npm install jquery-eternal
Example:
<form>
<table id=mytable>
<tr>
<td><input name='title' required value="A Canticle for Leibowitz"></td>
<td>
<label><input type='radio' name='age' value='used' required>Used</label>
<label><input type='radio' name='age' value='new' required checked>New</label>
</td>
<td><input type='number' name='cost' required value="9.99"></td>
</tr>
<tr>
<td><input name='title' required></td>
<td>
<label><input type='radio' name='age' value='used' required>Used</label>
<label><input type='radio' name='age' value='new' required>New</label>
</td>
<td><input type='number' name='cost' required></td>
</tr>
</table>
</form>
<script src="jquery.eternal.js"></script>
<script>
$("#mytable").eternal();
</script>
After calling the .eternal() method on the table, name attributes are changed and the DOM will automatically create more elements as needed.
<form>
<table id=mytable>
<tr>
<td><input name='data[0][title]' required value="A Canticle for Leibowitz"></td>
<td>
<label><input type='radio' name='data[0][age]' value='used' required>Used</label>
<label><input type='radio' name='data[0][age]' value='new' required checked>New</label>
</td>
<td><input type='number' name='data[0][cost]' required value="9.99"></td>
</tr>
<tr>
<td><input name='data[1][title]' required></td>
<td>
<label><input type='radio' name='data[1][age]' value='used' required>Used</label>
<label><input type='radio' name='data[1][age]' value='new' required>New</label>
</td>
<td><input type='number' name='data[1][cost]' required></td>
</tr>
</table>
</form>
API
.eternal('destroy')
Stop appending rows to the table.
.eternal(options)
Where options is passed on creation and is an object with one or more of these properties:
assignId
- The name of an input to assign a UUID in each row. If the field is not found, a hidden input will be added with this name.
See demo.html
for additional examples.