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.

Possible duplicate of jQuery - Getting form values for ajax POST — Ahmed Sunny
– Ahmed Sunny, Commented Aug 28, 2018 at 7:37

George Chondrompilas · Accepted Answer · 2018-08-28 07:52:33Z

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, 2018 at 7:52

George Chondrompilas

3,24729 silver badges35 bronze badges

answered Aug 28, 2018 at 7:26

Harshketu

3512 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Harshketu Over a year ago

But you have to set the name attribute in all the inputs

kemicofa · Accepted Answer · 2018-08-28 07:30:36Z

1

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>

answered Aug 28, 2018 at 7:30

kemicofa

17.7k10 gold badges92 silver badges145 bronze badges

Comments

domjanzsoo · Accepted Answer · 2018-08-28 07:26:56Z

0

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.

answered Aug 28, 2018 at 7:26

domjanzsoo

1412 silver badges13 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related