I am using the Validation plugin from http://jquery.bassistance.de/validate/demo which is a great plugin. I just found out after browsing the docs some more that it has the capability of dynamically adding a row of data. I would like to know how I can remove a row of data. After several attempts at creating a removeJoin() function, and a couple of hours of hacking it up, I decided to join the group.
Here's the script if anyone can offer assistance: <html> <head> <title>Add Queries :: Add Joins</title> <link rel="stylesheet" type="text/css" media="screen" href="css/ screen.css" /> <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validate.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function() { var qTemplate = jQuery.format($("#qTemplate").val()); function addJoin() { $(qTemplate(i++)).appendTo("#queryItems tbody"); } var i = 1; // start with one row addJoin(); // add more rows on click $("#addRow").click(addJoin); }); </script> <style type="text/css"> form.cmxform { width: 50em; } form.cmxform input.submit { margin-left: 0; } </style> </head> <body> <div id="main"> <button id="addRow">Add another query to the form</button> <textarea style="display:none" id="qTemplate"> <tr> <td class='type'> <select name="item-type-{0}"> <option value="">Select...</option> <option value="0">Learning jQuery</option> <option value="1">jQuery Reference Guide</option> <option value="2">jQuery Cookbook</option> <option vlaue="3">jQuery In Action</option> <option value="4">jQuery For Designers</option> </select> </td> <td class='type'> <select name="item-type-{0}"> <option value="">Select...</option> <option value="0">Learning jQuery</option> <option value="1">jQuery Reference Guide</option> <option value="2">jQuery Cookbook</option> <option vlaue="3">jQuery In Action</option> <option value="4">jQuery For Designers</option> </select> </td> <td class='type'> <select name="item-type-{0}"> <option value="">Select...</option> <option value="0">Learning jQuery</option> <option value="1">jQuery Reference Guide</option> <option value="2">jQuery Cookbook</option> <option vlaue="3">jQuery In Action</option> <option value="4">jQuery For Designers</option> </select> </td> <td class='type'> <select name="item-type-{0}"> <option value="">Select...</option> <option value="0">Learning jQuery</option> <option value="1">jQuery Reference Guide</option> <option value="2">jQuery Cookbook</option> <option vlaue="3">jQuery In Action</option> <option value="4">jQuery For Designers</option> </select> </td> </tr> </textarea> <form class="cmxform" method="get" action="foo.html"> <fieldset> <legend>Create Joins For Our Query</legend> <table id="queryItems"> <tbody> </tbody> <tfoot> <tr> <td colspan="4"><input class="submit" type="submit" value="Submit"/></td> </tr> </tfoot> </table> </fieldset> </form> </div> </body> </html>