Submit button name won't be posted on form submit when using jquery-form

Question

I have a strange problem that is driving me crazy! I'd like to submit a HTML form by ajax using jquery-form version 3.46.0 and then get the POST data on server, but my Submit button's name won't show up in the POST data! Maybe there's something wrong with this lib?

This my code:

<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>

And this is the test.php file:

<?php
var_dump($_POST);

I need the name of my Submit button appear in POST data on server as expected... But it doesn't! Does anybody have any idea?

Answer 1

If you use name for button, then while taking as $_POST, the value will be shown as post data. Instead of using name try using id or simply remove that if you don't have any use of that

Answer 2

We can solve this by following ways -

1. Use jquery form plugin and it will post all form data
2. If you are not using the above or any plugin then simply append submit button name to the form serialize as below:

    $('#myForm').submit(function(event){
      event.preventDefault();
      $.ajax({
        type: "POST",
        url: "process.php",
        data: $('#myForm').serialize()+"&btnSubmitName=true",
        success: function(response){
          $('#resultDiv').html(response);
        }
      });
    });

Answer 3

<div><a href="javascript:foo1()">
<div class="holder"><span class="label">Submit</span></div>
<div class="loader"><i class="fa fa-circle-o-notch fa-spin"></i></div></a></div>

And implement foo1 to submit the form.