How to prevent page load on form submission

Question

I have finally managed to get my plugin working. However, upon submission the whole page reloads along with my output above the form. How can I avoid my page to completely reload and not to display the form once it is submitted?

<?php    
function installer(){
    include('installer.php');
}
register_activation_hook( __file__, 'installer' ); //executes installer php when installing plugin to create new database

add_action('admin_menu','result_menu'); //wordpress admin menu creation

function result_menu()
{
    add_menu_page('Result','Result','administrator','xenon-result');
    add_submenu_page( 'xenon-result', 'Manage Marks', ' Manage Marks', 'administrator', 'Manage-Xenon-Marks', 'Xenon_Marks' );
}

function Xenon_Marks() //function to add marks addition form in admin view
{
    include('new/result-add-marks.php');
}

function html_form_code() 
{
echo '<form action="" method="post">';
echo '<fieldset>';
echo '<legend>Student Information</legend>';
echo 'Roll Number: <input type="number" min="170001" max="171000" name="rollNumber"><br>';
echo '<input type="submit">';
echo '<input type ="reset">';
echo '</form>';
}

function result_display(){
global $wpdb;
$student_id = $_POST['rollNumber'];
$query = "SELECT * FROM `wp_xenonresult` WHERE `student_id` = $student_id";
$result = $wpdb->get_row($query);
echo $result->student_name;
}

if(isset($_POST['submit']))
{
   result_display();
}

function display_shortcode() {
    ob_start();
    result_display();
    html_form_code();
    return ob_get_clean();
}

add_shortcode( 'xenon_result_display', 'display_shortcode' );
// Enable shortcodes in text widgets
add_filter('widget_text','do_shortcode');

Answer 1

Unless you are using AJAX for sending/fetching data, you must tolerate reloading a whole page.

Answer 2

Like losmi said, you need to use AJAX to avoid page reloads. If you're using jQuery you should do something like this:

$("form").on("submit", function(event) {
  var data = $(this).serialize());
  $.ajax({
    type: "POST",
    url: /path/to/admin-ajax.php,
    data: data,
    action: something_descriptive
  })
  event.preventDefault();
});

EDIT: Mark makes a fair point. In wordpress your AJAX calls should be handled by wordpress. You do this by adding a function to the ajax handler filters using the naming style below

add_filter('wp_ajax_something_descriptive', 'your_ajax_handler');
add_filter('wp_ajax_nopriv_something_descriptive', 'your_ajax_handler');
function your_ajax_handler() {
    /*do your form handling here, anything passed in the data object will be 
    available as a $_POST variable.  TO return content to the AJAX call echo it out.  
    Be sure to die() at the end of the function*/
}

The action that you pass in the AJAX call becomes part of the filter name wp_ajax_ACTION and logged in users and wp_ajax_nopriv_ACTION for not logged in users. Int he wild please be more specific than I was in your jQuery targeting, always check to make sure things exist before manipulating them, and make your function and action names logical.