Имя кнопки «Отправить» не будет опубликовано в форме отправки при использовании jquery-формы.

У меня странная проблема, которая сводит меня с ума!
Я хочу отправить HTML-форму с помощью ajax, используя JQuery-форма версии 3.46.0 и затем получить данные POST на сервере, но имя моей кнопки Отправить не будет отображаться в данных POST! Может быть, что-то не так с этой библиотекой?

Это мой код:

<form id="form" action="test.php" method="post">
<input name="email" type="email" placeholder="Email" required>
<!-- And yes! I didn't use an input with type submit because
I need my button to have some HTML content and applied css styles to them. -->
<button id="submit" type="submit" name="myFormName">
<span class="label">Submit</span>
</button>
</form>
<div id="formResult" style="display: block; margin: 20px 0; padding: 10px; background-color: #fbe6e6;" role="alert"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
<script>
jQuery(document).ready(function($) {

$('#submit').on('click', function(e) {
e.preventDefault();

$('#form').ajaxSubmit({
clearForm: true,
target: '#formResult',
success: function() {
// do sth
},
error: function() {
// do sth
}
});
});
});
</script>

И это файл test.php:

<?php
var_dump($_POST);

Мне нужно, чтобы имя моей кнопки «Отправить» появлялось в данных POST на сервере, как и ожидалось … Но это не так! У кого-нибудь есть идеи?