Can't figure why I can't hook up my AJAX handler through WordPress

Question

So I'm trying to follow the instructions here like a recipe book and am coming up for short. When I submit the form below, a POST request to http://thesite/wp-admin/member-update returns 404. As I understand, that request is supposed to trigger my function member_update() because of I set

<?php

add_action( 'wp_ajax_member-update', 'member_update' );

?>

at the beginning of my page. I can't figure out why it isn't working. The rest of the relevant code is the form

   <form method="POST" action="member-update"  enctype="multipart/form-data">
        <div class="modal fade" id="member-modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                <h2></h2>
                            </div>
                        </div>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                                Full name:
                            </div>
                            <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
                                <input type="text" name="fullname" value=""> 
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                                Title:
                            </div>
                            <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
                                <input type="text" name="title" value="">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                                Bio (approx 150 chars):
                            </div>
                            <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
                                <input type="textarea" name="bio" value=""> 
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                                Sort order:
                            </div>
                            <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
                                <input type="textarea" name="sord" value=""> 
                            </div>                          
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                                Pic: 
                            </div>
                            <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
                                <input type="file" name="pic">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="row">
                            <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                                <!-- empty space -->
                            </div>
                            <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
                                <button type="button" class="member-update-button wp-core-ui button-primary" id="remv-btn">Remove</button>
                                <button type="button" class="member-update-button wp-core-ui button-primary">Add</button>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="memberAction" value="" />
                </div>
            </div>
        </div>
    </form>

and the JS to handle the button clicked on the form

        jQuery('.member-update-button').click( function() {
                var parentForm = jQuery(this).closest('form');
                var formUrl = parentForm.attr('action');
                var formMethod = parentForm.attr('method');
                var postData = parentForm.serializeArray();
                jQuery.ajax(
                    {
                        url: formUrl,
                        type: formMethod,
                        dataType: 'json',
                        data: postData,
                        success: function(retmsg)
                        {
                            alert(retmsg); // test for now
                        }, 
                        error: function ( )
                        {
                            alert("error"); // test for now
                        }
                    }
                );
        } );

and the PHP function at the bottom of the page

<?php

function member_update()
{

    $message = ''; 

    $message .=  'Action : ' . $_POST['memberAction'] . '.   ';
    $message .=  'Name: ' . $_POST['fullname'] . '.    ';
    $message .=  'Title: ' . $_POST['title'] . '.    ';
    $message .=  'Biography: ' . $_POST['bio'] . '.    ';
    $message .=  'Sort order: ' . $_POST['sord'] . '.    ';
    $targetFileName = basename($_FILES['pic']['name']);
    $targetFileNameAndPath = 'assets/' . $targetFileName;
    $message .= 'Target file: ' . $targetFileName . '.    ';
    $message .= 'Target file (with path): ' . $targetFileNameAndPath . '.    ';

    $thismbr = new TeamMember($_POST['fullname'], $_POST['title'], $_POST['bio'], $_POST['sord'], $targetFileName);

    $thisAction = $_POST['memberAction']; 

    if ($thisAction == 'add')
    {

        $addMemberResult = $T->addMember($thismbr);

        if ($addMemberResult->succeeded)
        {
            $message .= "Successfully added member to list\n";

            if (move_uploaded_file($_FILES['pic']['tmp_name'], $targetFileNameAndPath))
            {
                $message .= "Successfully added " . $targetFileName . " to assets folder\n";        
            }
            else
            {
                $message .= "Encountered problem when trying to add " . $targetFileName . " to assets folder\n";
            }
        }
        else
        {
            $message .= "";
        }
    }
    elseif ($thisAction == 'update')
    {
        // ... 
    }
    elseif ($thisAction == 'delete')
    {
        // ...      
    }
    else 
    {
        $message .= 'Didn\'t recognize action';
    }

    echo json_encode($message);

}

?>  

Any idea what I'm doing wrong?

Answer 1

    jQuery('.member-update-button').click( function() {
         var parentForm = jQuery(this).closest('form');
         var postData = parentForm.serializeArray();
            jQuery.ajax({
                url: "<?php echo admin_url('admin-ajax.php'); ?>", 
                data: {action: 'member_update', postData: postData},
                type: "POST",
                dataType: 'json',
                success: function(retmsg)
                {
                    alert(retmsg); // test for now
                }, 
                error: function ( )
                {
                    alert("error"); // test for now
                }
            });
    });

try this...