HTML form sent by Ajax and handle with PHP

Question

I have a form input generated with PHP like given below:

<input type="text" name="category[type]">
<input type="text" name="category[name]">

In PHP, it's ok. But I need to send it with javascript by Ajax. I use jQuery and tried with function $.serializeArray() in data.

'form': $(this).closest('form').serializeArray(),

But the result what I got is:

array (7)
  0 => array (2)
    name => "category[type]" (11)
    value => "my_type"

JSFIDDLE

Best result what I need is:

array
  category => array
    type => my_type

or anything similar what I can work with.

Any idea?

Thank in advance for your help

Post your JavaScript. I have a feeling that you are placing serializeArray() line in the wrong place. It should look more like 'data': $(this).closest('form').serializeArray() — Mikey
– Mikey, Commented Jun 7, 2016 at 3:02
If you structure your inputs into a <form>, you could also just use $("form").submit() and it will handle all the data passing for you. — cyberbit
– cyberbit, Commented Jun 7, 2016 at 3:03

Mikey · Accepted Answer · 2016-06-07 03:19:17Z

2

Use .on method to attach the submit event handler to your form. This will trigger when you click on a submit button within your form.

You want to pass $(this).serializeArray() directly into data setting.

$('form').on('submit', function (e) {
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'script.php'
        data: $(this).serializeArray(), 
        success: function (res) {
            // handle the response you get back from the PHP
        }
    })
});

answered Jun 7, 2016 at 3:19

Mikey

6,7564 gold badges25 silver badges49 bronze badges

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

1 Comment

daremachine Over a year ago

Thank you for your answer. I found out where is a problem. Your solution work correctly but i need to add custom variables which are not part of form.

daremachine · Accepted Answer · 2016-06-07 04:10:54Z

0

It seems to be better approach get data with serializeArrayand modify them before sending.

Custom data must represent the same object as form object which is returned serializeArray.

.

var formData = $(this).closest('form').serializeArray();
    formData.push({ name: 'customParam', value: 'my_val'});

JSFIDDLE

Notice: If you put serializeArray directly to the ajax data. It will work correctly.

It might help someone.

edited Jun 7, 2016 at 4:10

answered Jun 7, 2016 at 4:05

daremachine

2,7982 gold badges27 silver badges36 bronze badges

Collectives™ on Stack Overflow

HTML form sent by Ajax and handle with PHP

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related