如何使用 AJAX POST 提交按钮值？

Question

I have tried various ways but I can't find an answer.

$("#sub1").click(function() {
  $.post($("#pro_update").attr("action"),
    $("#pro_update :input").serializeArray(),
    $("#sub1").attr("name"), function(info) {
      $("#result").html(info);
    });
  clearInput();
}); 

<form id='pro_update' action='updatephp/updateprocess.php' method='POST'>
  <header>
    <div class='container'>
      <div class='row'>
        <div class='col-md-12 col-sm-12'>
          <img src='images/tm-easy-profile.jpg' class='img-responsive img-circle tm-border' alt='templatemo easy profile'>
          <hr>
          <h1 class='tm-title bold shadow'>Hi,<input type='text' Placeholder='name' name='Name'></h1>
          <input type='text' Placeholder='Your Field' name='Job'>
          <button class='tm-title bold shadow' id='sub1' name='action1' value='update_personalbt'>submit</button>
          <span id='result'></span>
        </div>
      </div>
    </div>
  </header>
</form>

Answer 1

Data associated with submit buttons is only sent with form data when used to submit a form.

By intercepting the submission and using Ajax instead you aren't using a submit button, so it isn't included in the data.

Use <input type="hidden"> instead. That will always be a successful control and included in the form data (even if you use serializeArray ).

Your example only includes one submit button so you can hard code the name and value or the hidden input.

If you had multiple submit buttons and needed to determine which was used to submit the form then you could add click event handlers to each that would update the value of the hidden input.

Answer 2

updated

var data = $.extend({}, $("#pro_update :input").serializeArray(), {action1: $('[name=action1]').val()};

 $(document).ready(function() { $('#pro_update').submit(function(e) { e.preventDefault(); $.post($("#pro_update").attr("action"), data, $("#sub1").attr("name"), function(info) { $("#result").html(info); }); clearInput(); return false; }); });

 <form id='pro_update' action='updatephp/updateprocess.php' method='POST'> <header> <div class='container'> <div class='row'> <div class='col-md-12 col-sm-12'> <img src='images/tm-easy-profile.jpg' class='img-responsive img-circle tm-border' alt='templatemo easy profile'> <hr> <h1 class='tm-title bold shadow'>Hi,<input type='text' Placeholder='name' name='Name'></h1> <input type='text' Placeholder='Your Field' name='Job'> <button class='tm-title bold shadow' id='sub1' name='action1' value='update_personalbt'>submit</button> <span id='result'></span> </div> </div> </div> </header> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>