How to use jQuery to submit a form without refreshing and then add another table row

Question

I'm setting up an input form project for my work, and for certain tables the user needs to be able to insert multiple data rows before moving onto the next form. I have the form set up in a table with input groups in the table cells like this:

$("#addRow").submit(function() {
  $("#tableData").each(function() {
    var tds = '<tr>';
    jQuery.each($('tr:last td', this), function() {
      tds += '<td>' + $(this).html() + '</td>';
    });
    tds += '</tr>';
    if ($('tbody', this).length > 0) {
      $('tbody', this).append(tds);
    } else {
      $(this).append(tds);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action='/costs_hours' method="POST">
  <h1 class="text-center mb-3">Costs and Hours</h1>
  <div class="card border-secondary w-100 text-light" style="background-color: #333f48">

    <div class="card-body w-100 text-end">
      <table id="tableData" class="table text-light text-center mt-3">
        <thead>
          <tr>
            <th scope="col">Project ID</th>
            <th scope="col">Implementation or Annual</th>
            <th scope="col">Category</th>
            <th scope="col">Costs</th>
            <th scope="col">Hours</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div class="input-group mb-3">
                <input name="project_id" type="text" class="form-control">
              </div>
            </td>
            <td>
              <div class="input-group mb-3">
                <div class="input-group mb-3">
                  <select name="imp_or_ann" class="form-select" id="inputGroupSelect01">
                    <option disabled selected>Choose...</option>
                    <option>Implementation</option>
                    <option>Annual</option>
                  </select>
                </div>
              </div>
            </td>
            <td>
              <div class="input-group mb-3">
                <div class="input-group mb-3">
                  <select name="category" class="form-select" id="inputGroupSelect01">
                    <option disabled selected>Choose...</option>
                    <option>EMO</option>
                    <option>Analysts</option>
                    <option>Maintenance</option>
                    <option>ETS</option>
                    <option>BOT</option>
                    <option>OtherUT</option>
                    <option>Materials</option>
                    <option>Non-UT Contract</option>
                    <option>Contingency</option>
                  </select>
                </div>
              </div>
            </td>
            <td>
              <div class="input-group mb-3">
                <input name="cost" type="text" class="form-control">
              </div>
            </td>
            <td>
              <div class="input-group mb-3">
                <input name="hours" type="text" class="form-control">
              </div>
            </td>
          </tr>
        </tbody>
        <button id='addRow' type="button" style="background-color: #bf5700;" class="btn btn-warning text-light">Add</button>
      </table>
      <div id="next">

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

Because the function calls .submit(), it submits the form and refreshes the page so the $(#tableData) function doesn't work. I tried changing it to a .click() instead of .submit() and also adding e.preventDefault() but both of those methods don't submit the form. Any ideas on how I can achieve this would be greatly appreciate! Thanks!

*'...to submit the form but without refreshing'* research AJAX — Rory McCrossan, May 26 '21 at 18:31
What was wrong with the `click()` approach? That should work fine. You have the correct button type, so it won't submit. — isherwood, May 26 '21 at 18:33
One other tip... an `each()` loop on a single element (by ID) doesn't make sense. — isherwood, May 26 '21 at 18:38

isherwood · Accepted Answer · 2021-05-26T18:52:14.333

Here's how I might approach this. First, grab the initial table row on load to use as a clone template (before the user can enter any data). Then just append that to the table's body as needed using a click handler on the button, along with submitting an ajax request.

Note that I've moved your button outside the table. It wasn't valid there.

jQuery(function($) {
  const cloneRow = $('#tableData tbody tr').first();

  $('#addRow').click(function() {
    // create and send ajax request here

    // then (optionally in an ajax request callback) add a new row
    cloneRow.clone().appendTo('#tableData tbody');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action='/costs_hours' method="POST">
  <h1 class="text-center mb-3">Costs and Hours</h1>
  <div class="card border-secondary w-100 text-light" style="background-color: #333f48">

    <div class="card-body w-100 text-end">
      <table id="tableData" class="table text-light text-center mt-3">
        <thead>
          <tr>
            <th scope="col">Project ID</th>
            <th scope="col">Implementation or Annual</th>
            <th scope="col">Category</th>
            <th scope="col">Costs</th>
            <th scope="col">Hours</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div class="input-group mb-3">
                <input name="project_id" type="text" class="form-control">
              </div>
            </td>
            <td>
              <div class="input-group mb-3">
                <div class="input-group mb-3">
                  <select name="imp_or_ann" class="form-select" id="inputGroupSelect01">
                    <option disabled selected>Choose...</option>
                    <option>Implementation</option>
                    <option>Annual</option>
                  </select>
                </div>
              </div>
            </td>
            <td>
              <div class="input-group mb-3">
                <div class="input-group mb-3">
                  <select name="category" class="form-select" id="inputGroupSelect01">
                    <option disabled selected>Choose...</option>
                    <option>EMO</option>
                    <option>Analysts</option>
                    <option>Maintenance</option>
                    <option>ETS</option>
                    <option>BOT</option>
                    <option>OtherUT</option>
                    <option>Materials</option>
                    <option>Non-UT Contract</option>
                    <option>Contingency</option>
                  </select>
                </div>
              </div>
            </td>
            <td>
              <div class="input-group mb-3">
                <input name="cost" type="text" class="form-control">
              </div>
            </td>
            <td>
              <div class="input-group mb-3">
                <input name="hours" type="text" class="form-control">
              </div>
            </td>
          </tr>
        </tbody>
      </table>

      <button id='addRow' type="button" style="background-color: #bf5700;" class="btn btn-warning text-light">Add</button>
    </div>
  </div>
</form>

Actually I noticed whenever I hit add it adds another row to the table but when I type in different information into that new row and hit add it submits the previous table again, ignoring the data in the new row. Any ideas on why that is? — Matthew, May 26 '21 at 19:20
I have no idea how you're submitting your data. Please don't ask new questions in comments. Post a new one if you like. — isherwood, May 26 '21 at 19:27

How to use jQuery to submit a form without refreshing and then add another table row

1 Answers1