Calling ajax function to submit form from html how to pass input values?

Question

I'm using modal to submit new data. It uses ajax to consume API.

I have no problem sending the data through the API, but I'm not good at html, it's confusing how you can pass the value of the form data.

In this case I'm showing a modal for the user to input new data then submit it to an ajax function addData() and I want to send all form values, but I don't know how to pass the data to the function.

<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>

Once I can pass the values to the function, I can do the rest just fine.

Edit: here is the solution for reference

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

What I learned: I thought you must pass the value directly to addData() something like addData(value1,value2,value3), but in this case you just called addData() and it will pass all values, then catch it in the ajax function.

[Ajax and Forms | jQuery Learning Center](http://learn.jquery.com/ajax/ajax-and-forms/) — Andreas, Aug 28 '18 at 07:23
Possible duplicate of [jQuery AJAX submit form](https://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) — Andreas, Aug 28 '18 at 07:24
Possible duplicate of [jQuery - Getting form values for ajax POST](https://stackoverflow.com/questions/7426085/jquery-getting-form-values-for-ajax-post) — Ahmed Sunny, Aug 28 '18 at 07:37

score 2 · Accepted Answer · edited Aug 28 '18 at 07:52

2

You can pass data in jquery ajax method as

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

    }
});

edited Aug 28 '18 at 07:52

George Chondrompilas

3,022
22
34

answered Aug 28 '18 at 07:26

Harshketu

341
2
12

But you have to set the name attribute in all the inputs – Harshketu Aug 28 '18 at 07:29

score 1 · Answer 2 · answered Aug 28 '18 at 07:30

Use serializeArray to automatically get all your input data.

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

score 0 · Answer 3 · answered Aug 28 '18 at 07:26

Get each input elements content by it's id. Something like:

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

Attach an eventhandler to the submit button to trigger you ajax function,and pass your variables into the data property of the ajax call.

Calling ajax function to submit form from html how to pass input values?

3 Answers3