Add data to dynamic table from modal form

Question

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

          
            
              
                
                  Location
                  *
                  
                
              
              
                
                  Area
                  *
                  
                
              
              
                
                  Name
                  *
                  
                
              
              
                
                  Destination
                  *
                  
                
              
              

              
                
                  Add New Item
                  

                  

                  
                    
                      
                        
                          Reference
                          Components
                          Classification
                          Consigned
                          Delete?
                        
                      
                        
                        
                        
                    
                  
                
              
    

    
      
        Declaration
        *

Modal

              
              
              
                                   
              
                
                  Add New Item
                
              
                          
                
                  
                    
                      Reference: 
                      * 
                    
                      
                    
                  
                  

                  
                    
                      Components: 
                      * 
                    
                      
                    
                  
                  

                  
                    
                      Classification: 
                      * 
                    
                      
                    
                  
                  

                  
                    
                      Consigned: 
                      *

traynor · Accepted Answer

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();

    const rows = [];
    $.each($(this).serializeArray(), function(i, field) {
      if (i > 0 && field.name === rows[rows.length - 1].name) {
        rows[rows.length - 1].value += ';' + field.value;
      } else {
        rows.push(field);
      }
    });

    let list = '';


    $.each(rows, function(i, field) {

      list += '' + field.value + '' + '';
    });

    list += '';

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

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

    counter++;

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


  });
});





  
    
      
        Location
        *
        
      
    
    
      
        Area
        *
        
      
    
    
      
        Name
        *
        
      
    
    
      
        Destination
        *
        
      
    
    

    
      
        Add New Item
        

        

        
          
            
              
                Reference
                Components
                Classification
                Consigned
                Delete?
              
            
            
            
          
        
      
    
    

    
      
        Declaration
        *
        

        
      
    
    

    
      
        
      
    
    
      
        
      
      
        
      
    



  
    
      
        
          
            Add New Item
          
        
        
          
            
              
                Reference: 
                * 
              
                
              
            
            

            
              
                Components: 
                * 
              
                
              
            
            

            
              
                Classification: 
                * 
              
                
              
            
            

            
              
                Consigned: 
                *

Add data to dynamic table from modal form

Answers (1)

Related Questions