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

您可以在jQuery ajax方法中以

的形式传递数据

OUTPUT

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

通过其ID获取每个输入元素的内容。像这样：

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

将事件处理程序添加到“提交”按钮以触发ajax函数，并将变量传递到ajax调用的data属性中。

调用ajax函数从html提交表单如何传递输入值？

3 个答案: