G-mail style form submission on table data

Question

I have table rows of data in html being filled from a CGI application. I want each row to have a check box next to it so I can delete multiple rows, just like in gmail.

I figured out the basic text form and was able to send it to the CGI program to delete the row, but I don't want to have to type in the row name to delete a single file at a time.

What does the code look like on both sides (html-browser and C-CGI app) for forms when you can select multiple deletions through check boxes? Is there an example somewhere? (I am limited to JS and HTML but I think JS is for validation anyway, don't need that right now. C coding on the CGI app side.)

Thank You.

Answer 1

Look into "AJAX" style javascript. When you make the AJAX request to the server, pass all the deletions. The server side should be coded to accept multiple deletions in a single request.

Answer 2

Well, you could do it in a few ways:

1) Have all elements in the same form. Name each checkbox the same but give each checkbox a value that distinguishes the record/id/file it represents. When the browser, if it is compliant, submits the form, the CGI app should be able to see the HTTP parameters as part of the POST or GET submission. Lots of CGI apps like PHP combine same-name parameters into an array. You can always walk the param list yourself with C as well.

// Client side html
<table>
<form>
<tr><td><input type="checkbox" name="id" value="1"/></td><td>Row 1</td></tr>
<tr><td><input type="checkbox" name="id" value="2"/></td><td>Row 2</td></tr>
<tr><td><input type="checkbox" name="id" value="3"/></td><td>Row 3</td></tr>
<tr><td><input type="checkbox" name="id" value="4"/></td><td>Row 4</td></tr>
</form>
</table>

// Server side CGI, using pseudo-code
String[] ids = request.getArrayOfParametersNamed("id");
if(!empty(ids)) {
 for(id in ids) {
   DatabaseControllerModelThingWhatever.deleteById(id);
 }

 // Actually if SQL based you should use a batch statement instead of 
 // one-at-a-time deletes like above
}

// Ok the rows are deleted, either print out the page, or better yet,
// send a redirect so that a user-refresh does not try and re-delete 
// already deleted stuff and also give the user a wierd "resubmit form" warning
// Done

2) Using AJAX and preferrably some type of Javascript library, when user clicks delete, perform an ajax-based submission that submits a request to delete the checked records. Simultaneously use Javascript to remove the rows from the HTML table. This means the user's page is never fully refreshed, well, sort of.

 // Client side HTML is same as before, only this time there is a DELETE button with
 // an onclick handler. Also, add a "class" or "id" to each "tr" so we can find it 
 // in the HTML table

 // Pseudo-javascript because I am lazy
 function onDeleteButtonClick() {

  // Get our ids
  var idElements = document.getElementsById("id");

  // Submit an async AJAX request (e.g. use Jquery and send ids as URL params)
  ajaxedDeleteSubmission(idElements);

  // Delete all the rows that should not be there
  for(i = 0; i < tablex.rows.length; i++) {
   // Grab the value of the "id" attribute of each table row (<tr id="?">...</tr>)
   id = tablex.rows[id].id;
   if(id in ids) {
    // Remove the row, forget how because now I just use Jquery.
    tablex.deleteRow(i);
   }
  }
 }