Send form elements and array through $.ajax()

Question

I need to pass through $.ajax() method some form elements and an array too. How can i send serialize and array by ajax?

my code bellow:

function loadgraficosajax(){
		var arr = ['331234','142323','327767'];
  
    	var data = $('#p-form').serialize;
  
        $.ajax({
            type: "POST",
            url: "/page/show",
            data: data,
            dataType : 'html',
            success: function (msg) {
                $(document).ajaxComplete(function (event, request, settings) {
                    $('.has-error').removeClass('has-error');

                    $(document).off('ajaxComplete').off('ajaxSend');
                    $('#addajax').html(msg);
                 });
            }
        });
	}

Welcome, @ikk1. This question seems to already have been asked and answered in a variety of ways. Remember to search and research before creating your own question. See: How do I ask a good question? and Why are some questions marked as duplicate? — gfullam
– gfullam, Commented Jun 17, 2016 at 11:52
Hello @gfullam! My question is a little different. i need to pass elements and array through a unique ajax request. Sorry if i miss some answers, but i searched a lot before this question. — ikk1
– ikk1, Commented Jun 17, 2016 at 12:00

antyrat · Accepted Answer · 2016-06-17 11:52:20Z

1

serialize is a method in jQuery, not a property, so you should call it in this way:

var data = $('#p-form').serialize();

and to pass your array you need to use param method and modify your array to be inside Object, where array name is object property:

var arr = { arr: ['331234','142323','327767'] };
var data = $('#p-form').serialize();
data += '&' + $.param( arr );

param will transform your object to serialised string:

console.log($.param( arr )); // "arr[]=331234&arr[]=142323&arr[]=327767"

edited Jun 17, 2016 at 11:52

answered Jun 17, 2016 at 11:45

antyrat

27.7k9 gold badges78 silver badges77 bronze badges

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

Comments

Marko Milivojevic · Accepted Answer · 2016-06-17 11:48:57Z

0

 var formData = new FormData($('#p-form')[0]);

 var arr = ['331234','142323','327767'];

 // append array to formData
 formData.append('arr',JSON.stringify(arr));

 $.ajax({
     type: "POST",
     url: "/page/show",
     data: formData,
     success:.....

answered Jun 17, 2016 at 11:48

Marko Milivojevic

5794 silver badges17 bronze badges

1 Comment

Box Box Box Box Over a year ago

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations!

Sandman · Accepted Answer · 2016-06-17 12:10:18Z

You could bundle the two items together in a stringified object which you can send:

function loadgraficosajax(){
    var arr = ['331234','142323','327767'];

    var data = $('#p-form').serialize();

    var request = {
        array: arr,
        elements: data
    }

    var data = JSON.stringify(request);

    $.ajax({
        type: "POST",
        url: "/page/show",
        data: data,
        dataType : 'json',
        success: function (msg) {
            $(document).ajaxComplete(function (event, request, settings) {
                $('.has-error').removeClass('has-error');

                $(document).off('ajaxComplete').off('ajaxSend');
                $('#addajax').html(msg);
             });
        }
    });
}

Collectives™ on Stack Overflow

Send form elements and array through $.ajax()

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related