Stay on same page after form submit within WordPress

Question

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

HTML Page in WordPress

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!

hi - you can use AJAX call (see wordpress codex) and then popup a js alert message or some html container with a message. — F. Müller, Sep 09 '14 at 17:21
As stated above: AJAX is your solution. Furthermore make the buttons type submit regular buttons to prevent the page reload. You can then use e.g. the onclick event to trigger the AJAX request. — newBee, Sep 09 '14 at 17:47
possible duplicate of [Prevent form redirect OR refresh on submit?](http://stackoverflow.com/questions/1263852/prevent-form-redirect-or-refresh-on-submit) — Francisco Corrales Morales, Sep 09 '14 at 22:15

score 0 · Accepted Answer · answered Sep 09 '14 at 17:58

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.

Stay on same page after form submit within WordPress

1 Answers1