Add data to dynamic table from modal form-CodePudding

I have a page that contains a form to collect some info. As part of that is a table where I'm trying to add rows of data from a modal form. Eventually, everything would be submitted to a SQL database.

Effectively, the whole form looks like:

Field 1

Field 2

Field 3

Field 5	Field 6	Field 7	Field 8	Delete
First	row			button
Second	row

Field 9

Submit

So field 1-3 would be appended to the beginning of each row upon submission to the SQL DB and 9 to the end.

The issue I'm having is getting the data entered in fields 5-8 on the modal form to appear in the table. What would be the best way to achieve this? I'm new to this so any help would be great.

I've had a look around and I see lots of way to get data out of a table to a modal form or to enter through fields in the table and add a new row that way like this (Add/Delete table rows dynamically using JavaScript) but I'd prefer to use a modal as my form for the table will end up being quite big.

HTML Form

          <div >
            <form action="inc/processnew.php" method="POST" id="newentry">
              <div >
                <div >
                  <label>Location</label>
                  <span >*</span>
                  <select  data-toggle="select2" id="location" name="location" required>
                    <option value>Select location...</option>
                    <?php echo fill_location_select_box($conn);?>
                  </select>
                </div>
              </div>
              <div >
                <div >
                  <label>Area</label>
                  <span >*</span>
                  <input type="text"  id="area" name="area" required>
                </div>
              </div>
              <div >
                <div >
                  <label>Name</label>
                  <span >*</span>
                  <input type="text"  id="name" name="name" required>
                </div>
              </div>
              <div >
                <div >
                  <label>Destination</label>
                  <span >*</span>
                  <input type="text"  id="destination" name="destination" required>
                </div>
              </div>
              </br>
              <div >
                <div >
                  <td colspan="3"><a  data-toggle="modal">Add New Item</a></td>
                  </br>
                  </br>
                  <div >
                    <table id="userList" >
                      <thead>
                        <tr>
                          <th>Reference</th>
                          <th>Components</th>
                          <th>Classification</th>
                          <th>Consigned</th>
                          <th>Delete?</th>
                        </tr>
                      </thead>
                        <tbody>
                        
                        </tbody>
                    </table>
                  </div>
                </div>
              </div>
    </br>
    <div >
      <div >
        <label>Declaration</label>
        <span >*</span> <br>
        <input type="checkbox"  id="declaration" name="declaration" value="Yes" required>
      </div>
    </div>
    </br>
    <div >
      <div >
        <input type="hidden" value="spacer">
      </div>
    </div>
    <div >
      <div >
        <button type="submit"  value="submit" id="submit" name="submit">Submit</button>
      </div>
      <div >
        <input type="hidden" value="<?php echo $today; ?>" id="date" name="date" required readonly>
      </div>
    </div>

Modal

              <div  id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div  role="document">
              <div >
                  <form name="userEntry">                 
              <div >
                <center>
                  <h4  id="myModalLabel">Add New Item</h4>
                </center>
              </div>
              <div >            
                <div >
                  <div >
                    <div >
                      <label >Reference: </label>
                      <span >*</span> </div>
                    <div >
                      <input type="text"  name="reference" id="reference" required>
                    </div>
                  </div>
                  </br>
                  <div >
                    <div >
                      <label >Components: </label>
                      <span >*</span> </div>
                    <div >
                      <textarea  name="components" id="components" required></textarea>
                    </div>
                  </div>
                  </br>
                  <div >
                    <div >
                      <label >Classification: </label>
                      <span >*</span> </div>
                    <div >
                      <input type="text"  name="classification" id="classification" required>
                    </div>
                  </div>
                  </br>
                  <div >
                    <div >
                      <label >Consigned: </label>
                      <span >*</span> </div>
                    <div >
                      <input type="text"  name="consigned" id="consigned" required>
                    </div>
                  </div>
                  </br>
              <div >
              <button type="button"  data-dismiss="modal"><span ></span> Cancel</button>
              <button type="button"  data-dismiss="modal"><span ></span> Save</a>
          </div>
                </form>
    </div>    
    </div>
      </div>    
  </div>

CodePudding user response：

move modal outside the form into a separate form
add submit listener to it (also add id and disable modal dismiss)
on modal form submit, validate data and create and append a table row, in which also add hidden inputs with values in a form of an array (userEntry[0][reference] etc.)
close modal, reset modal form

$(document).ready(function() {

  let counter = 0;

  $('#userEntry').on('submit', function(e) {
    e.preventDefault();

    let list = '<tr>';
    $.each($(this).serializeArray(), function(i, field) {

      list  = '<td>'   field.value   '<input type="hidden" name="userEntry['   String(counter)   ']['   field.name   ']" value="'   field.value   '"/>'   '</td>';
    });

    list  = '<td><button  onclick="return this.parentNode.parentNode.remove();">delete</button></tr>';

    $('#userList tbody').append(list);

    $('#AddModal').modal('hide');

    counter  ;

    $(this)[0].reset();


  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
<div >
  <form action="inc/processnew.php" method="POST" id="newentry">
    <div >
      <div >
        <label>Location</label>
        <span >*</span>
        <select  data-toggle="select2" id="location" name="location" required>
          <option value>Select location...</option>
          <?php echo fill_location_select_box($conn);?>
        </select>
      </div>
    </div>
    <div >
      <div >
        <label>Area</label>
        <span >*</span>
        <input type="text"  id="area" name="area" required>
      </div>
    </div>
    <div >
      <div >
        <label>Name</label>
        <span >*</span>
        <input type="text"  id="name" name="name" required>
      </div>
    </div>
    <div >
      <div >
        <label>Destination</label>
        <span >*</span>
        <input type="text"  id="destination" name="destination" required>
      </div>
    </div>
    </br>
    <div >
      <div >
        <td colspan="3"><a  data-toggle="modal" data-target="#AddModal">Add New Item</a></td>
        </br>
        </br>
        <div >
          <table id="userList" >
            <thead>
              <tr>
                <th>Reference</th>
                <th>Components</th>
                <th>Classification</th>
                <th>Consigned</th>
                <th>Delete?</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    </br>
    <div >
      <div >
        <label>Declaration</label>
        <span >*</span>
        <br>
        <input type="checkbox"  id="declaration" name="declaration" value="Yes" required>
      </div>
    </div>
    </br>
    <div >
      <div >
        <input type="hidden" value="spacer">
      </div>
    </div>
    <div >
      <div >
        <button type="submit"  value="submit" id="submit" name="submit">Submit</button>
      </div>
      <div >
        <input type="hidden" value="<?php echo $today; ?>" id="date" name="date" required readonly>
      </div>
    </div>
</div>
</form>
<div  id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div  role="document">
    <div >
      <form id="userEntry">
        <div >
          <center>
            <h4  id="myModalLabel">Add New Item</h4>
          </center>
        </div>
        <div >
          <div >
            <div >
              <div >
                <label >Reference: </label>
                <span >*</span> </div>
              <div >
                <input type="text"  name="reference" id="reference" required>
              </div>
            </div>
            </br>
            <div >
              <div >
                <label >Components: </label>
                <span >*</span> </div>
              <div >
                <textarea  name="components" id="components" required></textarea>
              </div>
            </div>
            </br>
            <div >
              <div >
                <label >Classification: </label>
                <span >*</span> </div>
              <div >
                <input type="text"  name="classification" id="classification" required>
              </div>
            </div>
            </br>
            <div >
              <div >
                <label >Consigned: </label>
                <span >*</span> </div>
              <div >
                <input type="text"  name="consigned" id="consigned" required>
              </div>
            </div>
            </br>
            <div >
              <button type="button"  data-dismiss="modal"><span ></span> Cancel</button>
              <button type="submit" ><span ></span> Save</a>
                        </div>
            </form>
            </div>
            </div>