Toggle navigation
Run LIVE DEMO
Show CODE
LIVE DEMO PAGE
Updated: 16.10.16 21:43
Smartform minimum example
<html> <head> <title>The minimum smartform.js example</title> <!-- jQuery + jQuery UI --> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <!-- Bootstrap --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Smartform --> <style> [data-placeholder]:empty:before { content: attr(data-placeholder);opacity: 0.4;font-style: italic; } </style> <script src="http://smartform.ikx.no/Downloads/jquery.smartform.js"></script> </head> <body> <form id="Form1"> <h1>The minimum smartform.js example</h1> <table class="table table-striped"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody data-array="Items" data-autoinsert="1" data-remove="1"> <tr> <td data-func="input" data-name="Field1" data-placeholder="(enter text)"></td> <td data-func="input" data-name="Field2" data-placeholder="(enter text)"></td> <td data-func="input" data-name="Field3" data-placeholder="(enter text)"></td> </tr> </tbody> </table> <hr/> <h3>Current data:</h3> <code id="Data"></code> </form> <script> $(function() { var $form = $("#Form1").smartform(); $form.on("modified", function() { $("#Data").text(JSON.stringify($form.Read(),true)); }); }); </script> </body> </html>