在WordPress中提交表单后留在同一页面上

Question

I've added my HTML page as part of the admin wordpress (see screenshot)

And I'm trying to get it so on each submit button, if the record is successfully added to the database a pop up shows up saying "Success!" and then clear the form data without leaving the page. At the moment my current set up tries to load the external page instead of remaining on the page in the screenshot. Here's my HTML and PHP:

<form class="pure-form" name="addAthlete" action="submitForm.php" method="POST">
    <fieldset class="pure-group">
        <input type="text" class="pure-input-2" name="membershipID" placeholder="Membership ID">

        <input type="text" class="pure-input-2" required="required" name="firstName" placeholder="First Name">

        <input type="text" class="pure-input-2" required="required" name="surname" placeholder="Surname">
    </fieldset>

    <button name="submitAthlete" type="submit" class="pure-button pure-input-2 pure-button-primary">Submit</button>
</form>

<?php
function showSuccess() {
    echo "Success! One record added.";
}

if (isset($_POST['submitAthlete'])) {
    addAthlete();
}

function addAthlete() {
    include 'addAthlete.php';
    showSuccess();
}
?>

I'm assuming the problem lies with the fact that the echo "Success" is trying to echo on the submitForm.php page which is how I've written it. This is because of the way the page is embedded into wordpress, you can see this below:

add_action( 'admin_menu', 'db_menu' );

function db_menu() {
    add_menu_page(
    'Database Form',     // page title
    'Database Form',     // menu title
    'manage_options',   // capability
    'database-form',     // menu slug
    'wpse_91693_render' // callback function
    );
}

function wpse_91693_render() {
    global $title;

    print '<div class="wrap">';
    print "<h1>$title</h1>";

    $file = plugin_dir_path( __FILE__ ) . "submitform.php";

    if ( file_exists( $file ) )
    require $file;

    print '</div>';
}

How can I get a pop up or something to show up within this WordPress page on each submit?

Thanks!

Answer 1

When you submit a form, it posts data to a new webpage by loading it. In order to stay on the same page, the action should take you to that same page ( move your processing logic there aswell, checking for posted arguments ) or if you don't want to see a reload, use ajax instead.