Table with two buttons. One jQuery-ajax doesn't replace <tbody> of <table>, but instead redirects browser to ajax url

Question

EDIT: I originally simplified my code, hoping to isolate my problem, but I see I need to show the unsimplified code to discover my problem; so I'm replacing the HTML and JavaScript with the "full version", and have edited my description to include new information.

I have a table with two Buttons.

One button works fine: it triggers a jQuery overlay form so the user can enter data for a new row. AJAX then removes the "old" < tbody > and replaces it with a new < tbody > (with the new row added). That works fine. --critically, it also stores the new row into a database.

The other button is responsible for removing rows that have been checked by the user. jQuery AJAX does remove the selected rows from the database, but instead of replacing the "old" < tbody > with the new (now smaller) one, it loads the AJAX url into the browser, which shows the raw new set of rows that were intended to be put into the < tbody >. Using the back button and F5-ing shows that the rows were indeed removed.

I don't know how to 'blend' these buttons into one table.

Here is the jQuery:

    // opens a pop-up form as an overlay (id: #box_form) that has its own buttons
$('#addy').click(function(e){   
    //e.preventDefault();
    $('#box_form').dialog('open');
});

$( "#datepicker" ).datepicker(
        {altFormat: "yy-mm-dd"}
);

$('#box_form').dialog({
    autoOpen: false,
    height: 340,
    width: 400,
    modal: true,
    buttons: [
        {
            text: "Cancel",
            click: function() {
                $(this).dialog("close");
            }
        },
        {
            text: "Submit",
            click: function() {
                var symbol = $("#symbol").val();
                var quant = $("#quant").val();
                var price = $("#price").val();
                var datepicker = $("#datepicker").val();
                var fee = $("#fee").val();
                var account = $("#account").val();
                var owner = $("#owner").val();
                // Returns successful data submission message when the entered information is stored in database.
                var dataString = 'symbol='+ symbol + '&quant='+ quant + '&price='+ price + '&datepicker='+ datepicker + '&fee='+ fee + '&account='+ account + '&owner='+ owner;
                if(symbol==''||quant==''||price==''||datepicker==''||fee==''||account=='')
                {
                    alert("Please Fill All Fields");
                }
                else
                {
                    $.ajax({
                        type: "POST",
                        url: "addPurch.php",
                        data: dataString,
                        cache: false,
                        success: function(result){
                            //document.getElementById("stocktablebody").innerHTML = result;
                            $("#stockstable tbody").html(result);
                        }
                    });
                    //close this little input form overlay
                    $( this ).dialog( "close" );
                }
                return false;
            }
        }
    ]
});

$('#selectAll').click(function(event){  
    $(this).closest('table').find('td input:checkbox').prop('checked', this.checked);
});

$('#removie').submit(function(event){   
    event.preventDefault();
    var remove = $("#remove[]").val();
    var owner = $("#owner").val();
    var dataString = 'remove='+ remove + '&owner='+ owner;              
    //var url = "removePurch.php"; //$(this).attr('action');// this attribute's action (specified in <form> tag)

    $.ajax({
        type: "POST",
        url: "removePurch.php",
        data: dataString,
        cache: false,
        success: function(result){
            //document.getElementById("stocktablebody").innerHTML = result;
            $("#stockstable tbody").html(result);
        }
    });
    return false;
});

Here is the HTML: (First big div is for the Add button's jQuery pop-up; Second big block is the actual table.)

    <!-- Pop-up form hidden by JavaScript until button is clicked -->
<div id="box_form" title="Add a purchase">
    <form id="addsymbol" action="addPurch.php" method="POST"
        name="addstock" enctype="multipart/form-data">
        <input type="hidden" name="owner" id="owner" value="me" />
        <table class="popuptable">
            <thead>
                <tr>
                    <td class="right"><label for="symbol">Symbol:</label></td>
                    <td><input type="text" name="symbol" id="symbol"></td>
                </tr>
                <tr>
                    <td class="right">
                        <!--  for="..." Specifies which form element a label is bound to -->
                        <label for="quant">Quantity:</label>
                    </td>
                    <td><input type="text" name="quant" id="quant"></td>
                </tr>
                <tr>
                    <td class="right"><label for="price">Price for each: </label>
                    </td>
                    <td><input type="text" name="price" id="price"></td>
                </tr>
                <tr>
                    <td class="right"><label for="fee">Fee: </label></td>
                    <td><input type="text" name="fee" id="fee"></td>
                </tr>
                <tr>
                    <td class="right"><label for="datepicker">Date
                            Purchased: </label></td>
                    <td><input type="text" name="datepicker" id="datepicker">
                        <!-- had real trouble getting data to POST, just made all names,ids === and it worked -->
                    </td>
                </tr>
                <tr>
                    <td class="right"><label for="account">Which account:
                    </label></td>
                    <td><select name="account" id="account">
                            <option value="note">must fix fee functionality</option>
                            <option value="FidelityIndividual">Fidelity Individual</option>
                            <option value="FidelitySEP">Fidelity SEP</option>
                            <option value="FidelityRoth">Fidelity Roth</option>
                            <option value="ScottradeIRA">Scottrade IRA</option>
                    </select></td>
                </tr>
            </thead>
        </table>
    </form>
</div>

<!-- Table with two buttons (Add-a-row and Remove-a-row), and a checkbox for each row, and a checkbox to "check all rows" -->
<table id="stockstable" class="center">
    <thead>
        <tr>
            <th colspan="2">
                <!--  this just triggers form to come up.  Form has its own buttons -->
                <input type="submit" id="addy" value="Add a stock purchase">
            </th>
            <th colspan="3">Activity Today</th>
            <th colspan="2">Change Since Purchase</th>
            <th colspan="3">Cost Basis</th>
            <th colspan="3">Purchas Details</th>
            <form action="removePurch.php" method="post"
                enctype="multipart/form-data">
                <input type="hidden" name="owner" id="owner" value="me" />
                <th><button id="removie">Remove</button></th>
        </tr>
        <tr>
            <th>Name</th>
            <th>Symbol</th>
            <th>Price</th>
            <th>$ change</th>
            <th>% change</th>
            <th>Quantity</th>
            <th>Purchase Price</th>
            <th>Total Cost</th>
            <th>Total % Change</th>
            <th>Total $ Change</th>
            <th>Fee</th>
            <th>Account</th>
            <th>Purchase Date</th>
            <th><input type="checkbox" name="remove[]" id="selectAll"
                value="all"></th>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td>International Business Machines</td>
                <td>ibm</td>
                <td>166.95</td>
                <td>+3.10</td>
                <td>1.86</td>
                <td>1,986.88%</td>
                <td>$158.95</td>
                <td>8</td>
                <td>8</td>
                <td>71.00</td>
                <td>7.00</td>
                <td>note</td>
                <td>07/16/2015</td>
                <td><input type="checkbox" name="remove[]"
                    value="55a3436f5490c4ed4cbbe1a5"></td>
            </tr>
            <tr>
                <td>Facebook, Inc.</td>
                <td>fb</td>
                <td>87.95</td>
                <td>+2.07</td>
                <td>2.35</td>
                <td>999.38%</td>
                <td>$79.95</td>
                <td>8</td>
                <td>8</td>
                <td>71.00</td>
                <td>7.00</td>
                <td>note</td>
                <td>07/30/2015</td>
                <td><input type="checkbox" name="remove[]"
                    value="55a346745490c4ee4cbbe1a6"></td>
            </tr>
        </tbody>
    </form>
</table>

Answer 1

1. I don't need the < form > tag in the table at all because JS has access to all the elements in the DOM.

2. in $('#removie').click(function(event) (I changed it from submit to click because it's no longer a form, but just a button), the checkboxes have to be "unpacked" or "discovered" by JavaScript, and put into a JavaScript array like so:

    var remove = []; $(':checkbox:checked').each(function(i){ remove[i] = $(this).val(); }); 

...it somehow knows which checkboxes, even though I removed the < form > tag. The rest in that jQuery function is the same as the original question.

3. In the PHP, the checkbox data is received via POST only as a comma separated value, and has to be exploded into an array (oh, or not, depending on your code, really) like so:

    $remove = explode(',', $_POST['remove']); 

4. Profit.