Ajax form submission from admin panel

I have created a page in admin panel and there I have created a form for CSV export/import . Action of my form is “/wp-admin/admin-post.php” . I want to submit that form via ajax . I want to remain on the same page , that I have created in admin panel .

Here is my code to create admin page with form .

add_action( 'admin_menu', 'suiteImportExport' );
function suiteImportExport(){

add_submenu_page('edit.php?post_type=suites','Suite Export Import', 'Suite Export Import', 'manage_options', 'suite_export_import', 'suite_export_import_menu','',3);

}


function suite_export_import_menu(){
?>
<h2>Suite Report Export/Import </h2>

<div id="export_import_form">
               <form action="<?php echo site_url(); ?>/wp-admin/admin-post.php" method="post" enctype="multipart/form-data">
                            <input type="hidden" name="action" value="export_vacancy">
                            <input type="hidden" name="subaction" value="imp_vacancy">
                            <input type="file" name="file_source" id="file_source" value="" />
                            <input type="hidden" name="cmd" value="import" />
                            <input type="submit" value="Import" /><br />
                            <!--input type="checkbox" name="trancate" value="1" /> replace suites-->
               </form>
</div>
<?php
}

Here is my function to process the form

function import_export_action($cmd){
    if ($cmd == "import")
    {
        /*Form processing action*/
    }
}

All the code I have written in functions.php file . How can submit this form via ajax and stay on same page .

File Upload via Ajax is a bit tricky, but manageable.

Add some additional form fields (nonce and ajax_action) to your form in suite_export_import_menu():

function suite_export_import_menu(){
    ?>
    <h2>Suite Report Export/Import </h2>

    <div id="export_import_form">
        <p id="custom_ajax_call_process">Uploading...</p>
        <p id="custom_ajax_call_result"></p>
        <form action="<?php echo admin_url('admin-ajax.php'); ?>" method="post" enctype="multipart/form-data" target="upload_target">
            <input type="hidden" name="action" value="export_vacancy">
            <input type="hidden" name="subaction" value="imp_vacancy">
            <input type="file" name="file_source" id="file_source" value="" />
            <input type="hidden" name="cmd" value="import" />
            <input type="hidden" name="ajax_action" value="custom_ajax_call" />
            <input type="hidden" name="_ajax_nonce" value="<?= wp_create_nonce('custom_ajax_call')?>" />
            <input type="submit" value="Import" /><br />
            <!--input type="checkbox" name="trancate" value="1" /> replace suites-->
            <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:none;"></iframe>
        </form>
    </div>
    <?php
}

Adding AJAX call to functions.php or your plugin file:

function custom_ajax_call() {
    if(!wp_verify_nonce( $_POST['_ajax_nonce'], 'custom_ajax_call' )) {
        die(-1);
    }
    $success = 0;
    // Put your Code here

    if ( true ) { //TODO: Change to condition if upload is success...
        $success = 1;
    }
    ?>
    <script language="javascript" type="text/javascript">
        window.top.window.stopUpload(<?= $success ?>);
    </script>
    <?php
    exit;
}

function custom_ajax_call_init() {
    if($_REQUEST['ajax_action'] === 'custom_ajax_call') {
        do_action( 'wp_ajax_custom_ajax_call' );
    }
}

if (is_admin()){
    add_action('wp_ajax_custom_ajax_call', 'custom_ajax_call');
}

add_action( 'init', 'custom_ajax_call_init');

Create custom_ajax_call.js in your theme or plugin directory:

var stopUpload,
    startUpload;

jQuery('document').ready(function($) {
    stopUpload = function (success) {
        if (success)
            $('#custom_ajax_call_result').empty().text('Success!');
        else
            $('#custom_ajax_call_result').empty().text('Fail!');
        $('#custom_ajax_call_process').hide();
        return true;
    };

    startUpload = function() {
        $('#custom_ajax_call_process').show();
        $('#custom_ajax_call_result').empty();
    };

    $('body').on('submit', '#export_import_form', function () {
        startUpload();
    });
});

Enqueue the Script in your functions.php or plugin file (mind the TODO):

function admin_enqueue_custom_ajax_call(){
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'custom-ajax-call', get_template_directory_uri().'/path/to/custom_ajax_call.js', array('jquery')); //TODO: Change to plugin URI if needed
}