POST data doesn't contain any form data

Question

I have a table with a form in it. However, when I hit the submit button, by POST data doesn't contain any of the input data... any ideas why?

<table class="table table-hover" name="share_table">
          <thead>
            <tr>
              <th>&#9679;</th>
              <th>Name</th>
              <th>Email</th>
              <th>Allocation</th>
              <th></th>
            </tr>
          </thead>

        <form id="myform" action="" method="post">
          <tbody>
            <tr>
              <th scope="row">&#9679;</th>
              <td><input type="text" id="name" placeholder="eg. John Smith" class="form-control"></td>
              <td><input type="email" id="email" placeholder="eg. john@email.com" class="form-control"></td>
              <td><input type="text" id="allocation" placeholder="1000" class="form-control"></td>
              <td></td>
              </tr>

          </tbody>

        </table>

        <div class="text-right">
        <p>
         <input type="submit" value="Create Project" class="cta"/>

        </form>
    </p>
        </div>

    <button class="cta" name="add">Add</button>

I'm adding and removing rows using jquery as such - not pretty but I'm a novice when it comes to js.

 <script>
    var inx = 1;
    </script>
    <script>

  function removex(ref){


    $(ref).remove();

  };
    </script>
    <script>
    jQuery(document).ready(function() {




  $('button[name="add"]').on('click', function(){


    var table = $('table[name="share_table"]');
    inx = inx + 1;
    var trx = '<tr id="row' + inx.toString() + '" />';
    var tr = $(trx);
    var td = $('<td />');

    var idrow = $('<th scope="row"/>').html('&#9679;');
    var input = $('<input placeholder="1000" />').attr({'class' : 'form-control'});
    var inputz = $('<input placeholder="eg. john@email.com"/>').attr({'class' : 'form-control'});
    var inputx = $('<input placeholder="eg. John Smith" />').attr({'class' : 'form-control'});
    var bx = '<a href="#" onclick="removex(row' + inx.toString() ;
    var bxx = bx + ')"> x</a>';
    var button = $(bxx);
    var namex = 'name' + inx.toString();
    var emailx = 'email' + inx.toString();
    var allocationx = 'allocation' + inx.toString();
    var tdName = td.clone().append(inputx.attr({'type': 'text', 'id': namex}));
    var tdEmail = td.clone().append(inputz.attr({'type': 'email', 'id': emailx}));
    var tdAllocation = td.clone().append(input.attr({'type': 'text', 'id': allocationx}));
    var tdRow = td.clone().append(idrow);
    var tdAction = td.clone().html(button);

    tr.append(tdRow);
    tr.append(tdName);
    tr.append(tdEmail);
    tr.append(tdAllocation);
    tr.append(tdAction);
    table.append(tr);
  });

});
    </script>

Answer 1

I think it is because you didn't put a page link in your action in the form tag