Sweetaleart没有在同一页面上发布ajax请求

Question

i have the following which is outputted via a php loop

<?php
    foreach ($decodeMessages as $messages) {
            print  "
         <div class='row clearfix js-sweetalert'>
                            <div class='col-sm-12'>
                            <form action='../Messages/Delete' mehtod='POST'>
                            <div class='card message-page'>
                                <div class='header'>
                                    <h2>
                                       From: " . $messages['Name'] .
                                       "<small>
                                            Email:" . $messages['Email']
                                        ."</small>
                                    </h2>
                                    <ul class='header-dropdown m-r--5'>
                                       <li>
                                            <input type='text' id='mtotal_".$key."' name='mID' value='".$messages['messageTotal']."' >
                                                <button type='button' onclick='showCancelMessage();'  data-key='".$key."' name='".$messages['messageTotal']."' id='submit' class='btn btn-default waves-effect m-r-20 cancel-button' data-type='cancel'><i class='fa fa-trash-o'></i></button>
                                            </li>
                                    </ul>
                                </div>
                                </form>
                                <div class='body'>";
                                        $iv = chr(0x0) . chr(0x0) . chr(0x0);
                                        print openssl_decrypt(base64_decode($messages['Message']), 'aes-256-cbc', $messages['toUser'], OPENSSL_RAW_DATA, $iv);
                               print "</div>
                            </div>
                        </div>
                    </div>
         ";
     }

    ?>

i am using the following to capture and post the following data using

        $(function () {
$('.js-sweetalert button').on('click', function () {
    var type = $(this).data('type');
    if (type === 'cancel') {
        showCancelMessage();
    }
});
});
function showCancelMessage() {
    $('.cancel-button').click(function(){
        var key = $(this).attr('data-key');
        var datastring = $("#mtotal_" + key).val();
    swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Delete",
        cancelButtonText: "Cancel",
        closeOnConfirm: false,
        closeOnCancel: false
    }, function (isConfirm) {
        if (!isConfirm) return;
        $.ajax({
            url: "../../Messages/Delete",
            type: "POST",
            data: {
            mID: datastring
        },
        success: function () {
            swal("Done!", "Message succesfully deleted!"+datastring, "success");
        },
        error: function (xhr, ajaxOptions, thrownError) {
            swal("Error deleting!", "Please try again", "error");
        }
    });
});
});
}

content within Messages/Delete:

<?php
    $mID = $_POST['mID'];
    echo "Response: " . $mID;
?>

Now when i use the print_r($_GET['mID']) or print_r($_POST['mID'] they both return empty array's. i'm posting on the same page so i simply added the print_r ontop of the page to see if anything is posted.

if i set a dataType in the ajax it returns with the error "Error Deleting".

So i'm not sure if im missing something with the ajax request, or i am simply not catching it properly using PHP ?