How to make a dynamic “Add Dataset” functionality using JS, HTML, PHP?

Question

Use Case

A user needs to enter several sets of data. Each data is a set of 6 numbers. Typically there are 10 to 15 such sets but can be up to 40. User needs ability to add new sets dynamically or specify number of sets ahead of time. Also needs ability to edit data in sets afterwards, remove some sets and possibly add some sets. And ability to save the entire data to server. In other words, dynamic excel-like functionality but on the web.

I say set to indicate that it can be a row or a column of 6 numbers.

Question

Is there an existing module I can use or is there anything I can implement to make it easier? My goals are

• keep HTML simple
• use native web stack implementation whenever possible (GET, POST, FORM, DIV, TABLE)
• but use the tools available to web developers to make life easy (JS, JQUERY, SESSION, AJAX, PHP back-end data generation, etc)

What I have tried:

I've decided to use columns for each set of data but that got me into some trouble -- I have to use HTML tricks like tabindex to keep form navigation consistent. I have no way to add new sets, I am not sure how to delete sets. I can certainly figure that out eventually but I think I have started off in the wrong direction. I would like to back up and design a different interface one that allows me to keep things simple while reaching the use case goals above. My try is below..

 //some JS functionality to keep in mind as an example var form = document.forms.my_form, elem = form.elements; elem.my_button.onclick = function() { alert('Selected Column: ' + elem.design.value); }; 

 <form name="my_form"> <table> <tbody> <tr> <th>Condition</th> <th></th> <th>Case 1</th> <th>Case 2</th> <th>Case 3</th> <th>Case 4</th> </tr> <tr> <td>Quantity 1</td> <td class="c">-</td> <td class="c"> <input tabindex="1" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="7" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="13" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="19" name="case[]" size="3" type="text"> </td> </tr> <tr> <td>Pressure</td> <td class="c">-</td> <td class="c"> <input tabindex="2" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="8" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="14" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="20" name="case[]" size="3" type="text"> </td> </tr> <tr> <td>Vacuum</td> <td class="c">-</td> <td class="c"> <input tabindex="3" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="9" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="15" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="21" name="case[]" size="3" type="text"> </td> </tr> <tr> <td>Quantity 4</td> <td class="c">-</td> <td class="c"> <input tabindex="4" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="10" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="16" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="22" name="case[]" size="3" type="text"> </td> </tr> <tr> <td>Temp</td> <td class="c">-</td> <td class="c"> <input tabindex="5" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="11" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="17" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="23" name="case[]" size="3" type="text"> </td> </tr> <tr> <td>Solids</td> <td class="c">-</td> <td class="c"> <input tabindex="6" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="12" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="18" name="case[]" size="3" type="text"> </td> <td class="c"> <input tabindex="24" name="case[]" size="3" type="text"> </td> </tr> <tr> <td></td> <td>Main</td> <td class="c"> <input name="design" value="1" checked="checked" type="radio"> </td> <td class="c"> <input name="design" value="2" type="radio"> </td> <td class="c"> <input name="design" value="3" type="radio"> </td> <td class="c"> <input name="design" value="4" type="radio"> </td> </tr> <tr> <td colspan="6"> <input type="button" name="my_button" value="get column number" /> </td> </tr> </tbody> </table> </form> 

Problems with my current direction

1. can't add new sets
2. deleting a set is difficult

And while it can be done the manipulations needed to change table to make above work are just not feasible (will make things too complicated) and so I seek new direction. One that will make it simple on the front end, and on the back end.

What I mean by simple HTML is the end result (after multiple add/delete/edit operations on the sets) should be a simple form that can be submitted via standard HTML or JS mechanisms. And that form must be kept consistent between the operations as well.

Answer 1

I would do the following:

Design: I would use <div> elements to create your table. table structure is visually nice for such tables, but they are hard to work with when it comes to dynamic actions and responsiveness.

Actions:

• Add - to add new sets, I would add a link to the top of your table that would say something like "add set", which when clicked(in Javascript of course), you will count the current sets, get the last number, and create your input in a manner where the name has an array with the key that matches the current set like so: <input tabindex="1" name="case['+ count +']" size="3" type="text"> where count is the total number of your current sets plus 1.

• Delete - every set would have a delete icon underneath every column which will set a flag to have it deleted from the database when submitted. Visually I would gray out the set, to show that it is "marked for deletion" (this action should be able to be undone).

• Submission - when you are ready to submit, you may do this either through AJAX or just simply through a POST request. Your post data would have any new sets or old sets with the new information. Each set would have a flag that either says update , eidt , new .. you can then use these flags to take the proper action in your backend.

Hope this helps.