Trouble with JSON returned from Ajax - php

Question

I've built a page (in WordPress) that is supposed to submit a form via AJAX, but whenever the form is submitted, the url changes to the form handler's url, and it just displays the JSON its supposed to return instead of using it to update the current page. It just looks like a blank page with:
{"id":"1","task":"test","status":"complete"}
Here's what I'm using for the form:
<div id='test'>
<form action ='handler.php' method='post' class='test_form complete'>
... hidden input fields ...
<input type="submit" name="markcomplete" value="Mark Complete" /></form>
</div>
Here's the ajax that is submitting the form:
jQuery('.test_form').on('submit', function(e) {
jQuery(this).hide();
jQuery.ajax({
url : myAjax.ajaxurl, //this is required for using ajax in WordPress
dataType : "json",
type: "POST",
data: jQuery(this).serialize(),
success: function (response) {
otherform = "#" + response.task + " form" + "." + response.status;
jQuery(query).show();
jQuery('#message').html("<p>status changed</p>");
}
});
e.preventDefault();
});
What this is supposed to do is hide the current form, show another form, and display a simple message that the status has been changed.
and here's the handler.php:
if (isset($_POST['markcomplete'])){
$id = $_POST['id'];
$task = $_POST['task'];
$cparray = array('userid' => $id, 'task' => $task, 'satus' => "complete");
// function that makes changes to database...
wp_send_json($cparray); // this is the equivalent of echo json_encode($cparray);
}
I know the post is being sent, because I'm seeing the changes made to the database, and its displaying the JSON I want the current page to use. I'm pretty inexperienced with AJAX so I wouldn't be surprised if its something simple.
Edit1: JQuery is included in the project. I don't get any javascript errors, but on further inspection I see this message in the console when I click submit:
"Resource interpreted as Document but transferred with MIME type application/json: "handler.php".

Answer 1

<div id='test'>
<form action="" method="POST" id="testForm" class='test_form complete'>
... hidden input fields ...
<input type="submit" name="markcomplete" value="Mark Complete" .></form>
</div>
jQuery('#testForm').on('submit', function(e) {
e.preventDefault();
jQuery(this).hide();
jQuery.ajax({
url : myAjax.ajaxurl, //this is required for using ajax in WordPress
dataType : "json",
type: "POST",
data: jQuery(this).serialize(),
success: function (response) {
otherform = "#" + response.task + " form" + "." + response.status;
jQuery(query).show();
jQuery('#message').html("<p>status changed</p>");
}
});
});
Use e.preventDefault() first to avoid form submission.

Answer 2

Solved: The issue was I didn't put the jquery inside
jQuery(document).ready(function(){});