Submitting the form without reloading. Ajax code in a file with fields. How to make the form work without reloading?

Question

AJAX

There is a form. I want the data to go away without reloading the page. Pasted the code for this after the form itself. The php handler is in the same file. Please point out where I went wrong. In this case, the page is reloaded.

<?php
/*
# ------------------------------------------------------------------------
# Extensions for Joomla 2.5.x - Joomla 3.x
# ------------------------------------------------------------------------
# Copyright (C) 2011-2014 Ext-Joom.com. All Rights Reserved.
# @license - PHP files are GNU/GPL V2.
# Author: Ext-Joom.com
# Websites:  http://www.ext-joom.com 
# Date modified: 01/09/2014 - 13:00
# ------------------------------------------------------------------------
*/

// no direct access
defined('_JEXEC') or die;
?>


<div class="mod_ext_callback <?php echo $moduleclass_sfx ?>">

<?php
// check
if(isset($_POST['extsendcallback'])) {	
  $name 		= trim(strip_tags($_POST["name"]));
  $phone 		= trim(strip_tags($_POST["phone"]));		
  
  if ($ext_show_message > 0) {
    $message 	= trim(htmlspecialchars($_POST["message"],ENT_QUOTES));
  }
  
  if ( $name=="" OR $phone=="") {
    if($ext_error_field == '' OR $ext_error_field == ' ') {
      $errMsg .= JText::_(ERRORFIELD)."<br />";
    } else {
      $errMsg .= $ext_error_field."<br />";
      }	
  }
  
  
  if($errMsg == '') {						
    
    $msg  = "$ext_name_label  $name <br/>";
    $msg .=	"$ext_phone_label  $phone <br/>";	
    if ($ext_show_message > 0) {
      if(get_magic_quotes_gpc()) {
        $message = stripslashes($message);
      }		
      $msg .=	"$ext_message_label \r\n$message";
    }
    
    $headers= "MIME-Version: 1.0\r\n";
    $headers .= "Content-type: text/html; charset=utf-8\r\n";
    $headers .= "From: $ext_my_email\r\n";
    $headers .= "Reply-To: $ext_my_email\r\n";
    //$headers .= "Return-Path: $email\r\n";
    
    mail($ext_my_email, $ext_subject, $msg, $headers);
  

?>
    <div style="text-align:center;">
      <p>
      <?php 
      echo $ext_send_message=='' ? JText::_(SENDMESSAGE) : $ext_send_message;
      ?>
      </p>
    <div style="clear:both;"></div>
    </div>
<?php
  }
}

if(!isset($_POST['extsendcallback']) || $errMsg != '') {
?>	
  <div class="ext_callback_form">
    <?php 
    if ($errMsg != ''){ 
      echo '<p>'.$errMsg.'</p>';
    }
    ?>
    <form id="ext_callback_id_<?php echo $ext_id;?>" class="blocks" action="" method="post">
      <p>
      <p class="title-formi">
      <?php echo $module->title;?>
      </p>
      
      <p>
      <p class="ext-callback-field-name">
        <input required type="text" class="text" name="name" id="name"  placeholder="<?php echo $ext_attribute_name; ?>" pattern="^[А-Яа-яЁё\s]+$" />
      </p>
      <p class="ext-callback-field-phone">
        <input id="phone" required type="text" class="text" name="phone"   placeholder="<?php echo $ext_attribute_phone; ?>" />
      <?php if ($ext_show_message > 0) { ?>
      <p class="ext-callback-field-message">
        <textarea class="textarea" name="message" id="message" placeholder="<?php echo $ext_attribute_message; ?>" required ></textarea>
      </p>
      <?php } ?>
      </p>
        <input type="submit" class="btn" id="button" value="<?php echo $ext_send_label;?>"  name="extsendcallback" />
      </p>
    </form>		
  </div>
<?php
}
?>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<script>
  jQuery(function($) {
    $("input[name=phone]").mask("[phone]");
  });  
</script>

<script>
$("#ext_callback_id_").submit(function (e) { // Устанавливаем событие отправки для формы с id=form
           e.preventDefault();
            var ext_callback_id__data = $(this).serialize(); // Собираем все данные из формы
            $.ajax({
                type: "POST", // Метод отправки
                url: "", // Путь до php файла отправителя
                data: form_data,
                success: function () {
                    // Код в этом блоке выполняется при успешной отправке сообщения
                    alert("Ваше сообщение отправлено!");
                }
            });
        });
</script>



  <div style="clear:both;"></div>
</div>