Как мне POST отправить значение кнопки, используя AJAX?

Question

Я пробовал разные способы, но не могу найти ответ.

$("#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

Данные, связанные с кнопками отправки, отправляются только с данными формы, когда они используются для отправки формы.

При перехвате отправки и использовании Ajax вместо этого вы не используете кнопку отправки, поэтому она не ' t включены в данные.

Используйте взамен <input type="hidden">. Это всегда будет успешным элементом управления и будет включено в данные формы (даже если вы используете serializeArray).

В вашем примере есть только одна кнопка отправки, чтобы вы могли жестко указать имя и значение или скрытый ввод.

Если у вас было несколько кнопок отправки, и вам нужно было определить, какие из них использовались для отправки формы, вы можете добавить click обработчики событий для каждого, что обновит значение скрытого ввода.

Answer 2

обновлено

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>