AJAX-Form to create pools

by Alexey Demin

HTML

<form>
<table border="1">
    <tr>
        <th width="25">nr.</th>
        <th>Question (Q)</th>
        <th>Answer (A)</th>
        <td><button class="addQ">+Q</button><button class="save">Save</button></td></tr>
    <tr>
        <th>1</th>
        <th><input type="text" name="q[]" value="" /></th>
        <td><input type="text" name="a[1][]" value="" /></td>
        <th><button class="addA">+A</button><button class="rmA">-A</button><button class="rmQ">-Q</button><button class="aType">Only one</button><input type="hidden" name="type[1]" value="1" /></th></tr>
</table>
</form>
<div id="echo"></div>

CSS

table {
 width: auto;
}
table th{
 font-weight: bold;
 text-align: center;
 vertical-align: top;   
}
table th:last-child {
 text-align: left;
}
table td {
 width: 200px;    
}
table input[type=text] {
 margin: 3px;
 width: 200px;
 outline: none;
}
div#echo {
 background-color: #eee;
 border: 2px dashed #ccc;
 padding: 5px;
 margin: 5px;
}
div#echo textarea {
  width: 99%;
}

JavaScript

/* Disable default action on form */
$('form').on('submit',function(e){
  e.preventDefault();
  return false;
});

$(document).on('click', 'button', function(){
        var self = $(this),
            row = self.parent().parent();
        switch (self.attr('class')) {
            case 'aType':
              var type = row.find('input:hidden').val();
              row.find('input:hidden').val(type == '1' ? 0 : 1);
              self.html(self.html() == 'Only one' ? 'Multi' : 'Only one');
                break;
            case 'addA':
              var idx = parseInt(row.children('th:eq(0)').text());
              row.children('td').append('<input type="text" name="a['+idx+'][]" value="" />');
                row.find('td input:last').focus();
                break;
            case 'rmA':
              if (row.children('td').children('input').length > 1) {
                row.children('td').children('input:last').remove();
              }
                break;
            case 'addQ':
                var idx = self.parent().parent().parent().children('tr').length;
                self.parent().parent().parent().append('<tr>'+
        '<th>'+idx+'</th>'+
        '<th><input type="text" name="q[]" value="" /></th>'+
        '<td><input type="text" name="a['+idx+'][]" value="" /></td>'+
        '<th>'+
            '<button class="addA">+A</button>'+
            '<button class="rmA">-A</button>'+
            '<button class="rmQ">-Q</button>'+
            '<button class="aType">Only one</button>'+
            '<input type="hidden" name="type['+idx+']" value="1" /></th></tr>');
                self.parent().parent().parent().find('tr:last input:first').focus();
                break;
            case 'rmQ':
              var table = row.parent();
              if (table.children('tr').length > 2) {
                row.remove();
                $.each(table.children('tr'), function(idx, itm){
                    if (idx > 0) {
                       ...