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?

I don't see any issue on my side, the button have a spining icon test.php shows the email entered — Masivuye Cokile, Feb 17 '17 at 12:59
Of course test.php shows the emailed entered... But it doesn't show the name of submit button included in the POST data. You know what I mean? — Ali, Feb 17 '17 at 13:02
you want to show `myFormName` as well on test.php when I do a `var_dump($_POST);` the button does show — Masivuye Cokile, Feb 17 '17 at 13:03
And actually I need the name of my Submit button on the server side... As I do more stuff with it! I'm just wondering why HTML doesn't send the Submit button's name with the POST data, while it should do that! — Ali, Feb 17 '17 at 13:03
@Ali Google **html div inside button** there is something for you — Arsalan Mithani, Feb 17 '17 at 13:10
https://stackoverflow.com/questions/15885444/why-cant-a-button-element-contain-a-div — Eamonn, Feb 17 '17 at 13:11
I have edited my question... Now I'm somehow sure that the problem is coming from the jquery-form library... It seems that it doesn't send the Submit button's name to the POST data. — Ali, Feb 17 '17 at 13:27
so basically what you want is when the button is clicked the form must show on the results div? then the button must have the html content on the results? — Masivuye Cokile, Feb 17 '17 at 13:30
Yes, the results of server will show up on the DIV. But I basically need my button's name be inside of the POST data... Like when we submit the form naturally without using the jquery-form ajax lib. — Ali, Feb 17 '17 at 13:37
Have you tried using a newer version of jQuery Form? It's currently at 4.2.1. There's lots of changes since 3.50 that you're using, including jQuery 3 compatibility and a fix for "Sometimes submit button is not found" https://github.com/jquery-form/form — Kevin Morris, May 30 '17 at 13:21

score 0 · Answer 1 · answered Feb 17 '17 at 12:55

0

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

answered Feb 17 '17 at 12:55

sujivasagam

1,659
1
14
26

score 0 · Answer 2 · answered Sep 17 '19 at 11:03

We can solve this by following ways -

Use jquery form plugin and it will post all form data
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);
        }
      });
    });

score -1 · Answer 3 · answered Feb 17 '17 at 12:56

-1

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

answered Feb 17 '17 at 12:56

viju1984

1
1

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

3 Answers3