Handling forms with multiple actions

Question

Let's say I have an Admin page with a list of items, and I have various capabilities to modify those records -- Change its name, Delete it, Clear its contents, etc. For example a row would be rendered similar to the following:

const row =`<tr id="id${this.id}">
                <td name="name">
                    <input type="text" placeholder="Set name" value=${this.name} />
                    <input type="submit" name="setName" value="Save" />
                </td>
                <td name="size">${this.set.size}<td/>
                <td name="elements"><b>{ ${this.renderSetElements()} }</td>
                <td name="actions">
                    <input type="text" placeholder="Add element" />
                    <input type="submit" name="addElement" value="Add" />
                    <input type="submit" name="clearElements" value="Clear" />
                    <input type="submit" name="deleteSet" value="Delete" />
                </td>
           </tr>`

What would the proper way to add forms here? Should there be one form around the row? Should there be four forms per row -- one for each action? (setName, addElement, clearElements, deleteSet)? Or what is the suggested way to accomplish the above? Additionally, is identifying the row as id${this.id} appropriate, or what's usually the contention for something like that?

Answer 1

The short answer is that you can have a

1. The form inside a cell td.

<table>  
  <tr><td><form>...</form></td></tr>
  <tr><td><form>...</form></td></tr>
</table>

2. You can have a table inside a form

<form>
  <table>  
    <tr><td>...</td></tr>
    <tr><td>...</td></tr>
  </table>
</form>

3. Or you can ditch the form element and use JavaScript to do Ajax:

In this case, I will be using the Javascript library jQuery since it simplifies a lot of stuff; however, you can implement this with pure Javascript if you want to.

// Wait for the document to be fully loaded
$(document).ready(function(){
  $(".submit").on("click", function(event){
      event.preventDefault();
      console.log("submit...");
      var url = "https://httpbin.org/get";
      var data = {
        id: $('#id').val()
      };
      $.get(url, data, function(result){ 
        console.log("Server received the id number: ", result.args.id); 
      });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>  
  <tr>
    <td><input class="inputs" id="id" value="0"/></td>
  </tr>
  <tr>
    <td><button class="submit" id="add">Add</button></td>
  </tr>
</table>

In your particular case, you might try generate these rows dynamically and using Ajax to send the information to the server, without having to refresh the whole page. Here is an example:

(function(){

  let count = 0;

  function createColumn(){
    let column = $('<td>');
    let text = $(`<input type="text" placeholder="Set name" value="${count}">`);
    let submit = $('<button class="save" type="submit" name="setName">Save</button>');
    column.append(text);
    column.append(submit);
    return column;
  }

  function createRow(){
    let row = $('<tr>');
    row.attr("id", count++);
    row.append(createColumn());
    return row;
  }

  let table = $('#table');
  $('#btnAdd').on('click', () => {
    table.append(createRow());
  });

  table.on('click', '.save', function() {
    let text = $(this).prev().val();
    console.log("INPUT TEXT:", text);
  }); 

})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnAdd">Add Row</button>
<table id="table">
</table>

I hope you found this informative, useful, and that you can apply it to your particular issue.