Вызов функции AJAX для отправки формы из HTML, как передать входные значения?

Question

Я использую модал для отправки новых данных. Он использует ajax для использования API.

У меня нет проблем с отправкой данных через API, но я не очень хорошо разбираюсь в html, это сбивает с толку то, как вы можете передать значение данных формы.

В этом случае я показываю пользователю способ ввода новых данных, а затем отправляю их в функцию ajax addData(), и я хочу отправить все значения формы, но я не знаю, как передать данные в функция.

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Tambah Karyawan</h3>
</div>
<div class="modal-body">
                    <form class="form-horizontal" role="form" id="tambah_karyawan">
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="name">Name:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="name_add" autofocus>
                                <p class="errorTitle text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="content">Role:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="role_add" autofocus>
                                <p class="errorContent text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="content">Email:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="email_add" autofocus>
                                <p class="errorContent text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="content">Password:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="password_add" autofocus>
                                <p class="errorContent text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="content">Foto:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="foto_add" autofocus>
                                <p class="errorContent text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="content">Cabang:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="cabang_add" autofocus>
                                <p class="errorContent text-center alert alert-danger hidden"></p>
                            </div>
                        </div>
                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success add" onclick="document.getElementById('tambah_karyawan').addData()" data-dismiss="modal">
                            <span id="" class='glyphicon glyphicon-check'></span> Add
                        </button>
                        <button type="button" class="btn btn-warning" data-dismiss="modal">
                            <span class='glyphicon glyphicon-remove'></span> Close
                        </button>
                    </div>
                </div>

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

Редактировать: вот решение для справки

function addData()
{
    $.ajax({
    type: 'POST',
    url: "{{ url('someajaxurl') }}",
    dataType: "json",
    data: $('#tambah_karyawan').serialize(),
    success: function (data) {
        console.log(data);
    },
    error: function (data) {
            //
        }
  });
}

Что я узнал: я думал, что вы должны передать значение напрямую в addData (), что-то вроде addData (value1, value2, value3), но в этом случае вы просто вызвали addData (), и он передаст все значения, а затем перехватит его в функции AJAX.

Answer 1

Получить содержимое каждого элемента ввода по его идентификатору. Что-то вроде:

  var email=document.getElementById("email_add").innetHtml;

Присоедините обработчик событий к кнопке отправки, чтобы активировать функцию ajax и передать свои переменные в свойство data вызова ajax.

Answer 2

Используйте serializeArray для автоматического получения всех ваших входных данных.

$('#tambah_karyawan').on('submit', function(e){
  e.preventDefault();
  const data = $(this).serializeArray();
  console.log(data);
  
  //json data to send
  const json = JSON.stringify(data);
  console.log(json);

  //ajax here
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="tambah_karyawan">
  <input type="text" value="john" name="name">
  <input type="text" value="smith" name="lastname">
  <input type="text" value="123" name="phonenumber">
  <input type="submit" value="submit">
</form>

Answer 3

Вы можете передавать данные в метод jquery ajax как

$.ajax({
       type: 'POST',
        url: 'your url',
        data: $('#tambah_karyawan').serialize(),
        success: function () {

    }
});