form_table1

by bvotcode

HTML

<form id="myForm" method="post" target="_parent">

    <p>Name: 
      <input type="text" name="Name" value="" maxlength="200" size="60">
    </p>

    <p>User ID:
        <input type="text" name="UserID" value="" maxlength="200" size="60">
    </p>

    <p>Password:
        <input type="password" name="Password" value="" maxlength="200" size="60">
    </p>

    <p>Organization:
        <input type="text" name="Organization" value="" maxlength="200" size="60">
    </p>

    <p> Role
      <select name="Role">
        <option name = "Member" selected>Member</option>
        <option name = "Admin">Admin</option>
      </select>
    </p><br />
    <p> 
      <input id="submit" type="button" value="Submit" name="submit">
      <input type="button" name="cancel" value="Cancel" onClick="closebox()">
    </p>
</form>
        
<table id="details"></table>   

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous"></script>

CSS

.remove {color: red}

JavaScript

$(document).ready(function(){
    $('#details').on('click', '.remove', function() {
        $(this).closest('tr').remove();
    })
    
    $('#submit').on('click',function(){
        var st = '';
        $('#myForm input[type=text],input[type=password],select').each(function(){
            st = st+ '<td>'+$(this).val()+'</td>';
            $(this).val('');
        });
        var remove = $('<td />', {text : 'X', 'class': 'remove'});
        $('#details').append( $('<tr />').append(st, remove) );
    });
});