Ajax Публикация из всплывающей формы

Question

У меня есть форма, которая загружается во всплывающем слое div. У меня также есть функция saveForm(), которая отправляет пост-запрос AJAX.

Как я могу взять значение из двух полей ввода в эту функцию saveForm()?

Name: <input type="text" id="description" name="description" value=""><br><br> 
Description: <input type="text" id="description" name="description" value=""><br><br>
<button type="button" onclick="saveForm()">Save</button>

function saveForm() {
  $.post("save.php", {
    user_id: '1234'
  }, function(data, status) {
    alert(data);
  });
}

Answer 1

Дайте двум полям отдельные атрибуты id, затем получите их значения и задайте их как свойства объекта, который вы предоставляете как тело запроса для отправки в запросе AJAX.

Стоит также отметить, чтовам следует избегать использования атрибутов on* в вашем HTML, где это возможно. Лучше использовать ненавязчивые обработчики событий. Поскольку вы уже включили jQuery на страницу, это можно сделать с помощью on(), например:

Name: <input type="text" id="name" name="name" value=""><br><br> 
Description: <input type="text" id="description" name="description" value=""><br><br>
<button type="button" id="save">Save</button>

jQuery(function($) {
  $('#save').on('click', function() {
    $.post("save.php", {
      user_id: '1234',
      name: $('#name').val(),
      description: $('#description').val(),
    }, function(data, status) {
      console.log(data);
    });
  });
}

Еще лучше было бы поместить элементы в form и изменитьот button до type="submit". Затем вы можете подключиться к событию submit формы. Это сделано для улучшения доступности и удобства пользователей.

Answer 2

Вы можете отправить сообщение с данными, как в этом примере,

<script type="text/javascript">
var form = $("#your-form-id");
var data = $(form).serialize(); 
$.ajax({
    url: "your-url/save.php",
    data: data,
    method: 'POST',
    success: function (response) {
        //your js after success post
    }
});
</script>