WordPress plugin custom admin page - form result shows on blank page

Question

I am currently writing a WordPress plugin with the wppb wireframe. For the first time I need a custom settings page. I implemented it and also created a custom action hook to fire a function that gets some data as a result.

For now, I want to show this result in the admin page. But when I click on the button, the result is shown on a blank page rather than on the admin page.

How can tell my form and function to show the data in the admin dashboard and not on a blank page? I didn't find any help over google...

What I have so far:

On the admin settings page

<form action="http://myurl.com/wp-admin/admin-post.php" method="post">
  <input type="hidden" name="action" value="search_api">
  <input type="hidden" name="data" value="test">
  <input type="submit" value="Submit">
</form>

The action hook

$this->loader->add_action('admin_post_search_api', $plugin_admin, 'admin_search_api');

The function

public function admin_search_api() {
  echo $_POST['data'];
}

So, when I submit the form, a new page is loading and there is the expected result. But how can I frame it into the custom settings page? I am clueless...

So for clarification: I want to load the result of the form on the same page as the form. I am not really familiar with the wp-ajax, but might this be the answer?

Thanks in advance!

Answer 1

As said by Klaassiek, the codex has the right answer written in it.

Here is his comment:

You should indeed use wordpress’s ajax functionality for that. Plus, you will have to write a javascript function that does the ajax call and displays the result when the call is finished. Here is the documentation: codex.wordpress.org/AJAX_in_Plugins