Submit form with $.ajax when submit button is outside the form

Question

i have multiple form, so i create a form with button submit outside form, this form

$("#buttonSubmit").click(function (event) {
            event.preventDefault();
            if (confirm("Anda yakin akan Checkout ?")) {
                var formData = new FormData("form#formData");
                $(".loader").show();
                $.ajax({
                    url: 'belanja/belanja_crud.php',
                    type: 'POST',
                    data: formData,
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    success: function (data) {
                       //console.log(data);
                    }
                });
            }
            return false;
        });

<form id='formData'>
  <!-- input bla bla bla -->
  </form>
<button id='buttonSubmit' type='button'>Submit</button>

how to get all input from form on above and submit with ajax ?

There's no data on the form you have posted in your wonderful [mcve], so you're all done! Moving on ... — Tibrogargan, Nov 03 '16 at 06:50
The `FormData()` constructor expects a `
` element and not a CSS selector: https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData — Andreas, Nov 03 '16 at 06:54

score 3 · Accepted Answer · edited May 23 '17 at 12:33

3

To get all data in the form in one instruction you can use .serialize()

E.g

$.ajax({
    type: "POST",
    url: 'belanja/belanja_crud.php',
    data: $("#formData").serialize()
})
.done(function (data) {
    //do somthing
})
.fail(function (xhr, ajaxOptions, thrownError) {
    //do something
});

Or you can see this topic if you want it to JSON Format

edited May 23 '17 at 12:33

Community

1
1

answered Nov 03 '16 at 06:57

Aroniaina

1,252
13
31

if i used `serialize()` , what's a `cache: false,contentType: false,processData: false,dataType: 'json',` needed ? – wawan Setiyawan Nov 03 '16 at 07:04
@wawanSetiyawan I use serialize like this code without others parameters! – Aroniaina Nov 03 '16 at 07:05
hey, how to give a validation if input empty with serialize ? – wawan Setiyawan Nov 03 '16 at 07:32
that is another question not relating to this topic, you can use jquery.validate – Aroniaina Nov 03 '16 at 07:50

Submit form with $.ajax when submit button is outside the form

1 Answers1