How to pass Multiple input array element values having same name like ex: sikll[] via Ajax POST

Question

I have a form with 4 skill inputs having html like:

<input type="text"  id="skill1" name="skill[]" value="">
<input type="text"  id="skill2" name="skill[]" value="">
<input type="text"  id="skill3" name="skill[]" value="">
<input type="text"  id="skill4" name="skill[]" value="">

I need to get this in controller like:

Is there any way to get skill names passed to server without serialize as i have to append a limit attribute to my search_param which is an object. Basically i want all post data in search_param.data and my limit in search_param.limit

skill -> array('0'=>'php','1'=>java','2'=>'html') (basically as array in controller)

Previously i submitted data as form submit. Now i am making this to Ajax. I tried serialize() to transfer data to server controller via Ajax. But issue is that i am using a paginate function which accept limit as parameter(ex: param.limit, param is an Object).(pls chk below code) I need to pass both data and limit to ajax paginate function.

I need to pass both post data and limit to paginate function.

Below is the code:

    function getUsers() {
        var search_param = {'data':jQuery('#candidateForm').serialize()};
        jQuery.ajax({
            type: "POST",
            dataType:'JSON',
            url: jQuery('#site').val() + "search/ajax_search",
            data: search_param,
            cache: false,
            success: function(data) {
                if (data) {
                //something
}else{
                    //else something
                }
                search_param.limit = 14; //this is desired way but as serialized it wont work
                paginate_4a(jQuery('#site').val()+'search/ajax_search', 'srchResultCnt', search_param, {'fn':'fn_name', 'index':0});

            }

        });
    }

TRIED THIS BUT FAILED:

var skill = jQuery('input[name="skill[]"]').map(function(){return jQuery(this).val();});
    var skill_hid = jQuery('input[name="skill_hid[]"]').map(function(){return jQuery(this).val();});
    var experience = jQuery('input[name="experience[]"]').map(function(){return jQuery(this).val();});
    var search_param = {
        'skill':skill,
        'skill_hid':skill_hid,
        'experience':experience
    };

Throwing Uncaught TypeError: Illegal invocation Any help is appreciated.

SOLUTION:

use get() at last and now getting array in server side...thanks to Nisam....

$('input[name="skill[]"]').map(function(){return $(this).val();}).get();

Nisam · Accepted Answer · 2014-03-14 11:09:32Z

5

data param should be,

data: {searchaparams:search_param,page:1}

You can get the input values as array like,

var search_array = $('input[name="skill[]"]').map(function(){return $(this).val();}).get();

The variable search_array contains all the input values. You can get each values search_array[0], search_array[1] .. etc

edited Mar 14, 2014 at 11:09

answered Mar 14, 2014 at 9:22

Nisam

2,30521 silver badges33 bronze badges

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

7 Comments

George Joffin Joy Over a year ago

Hi Nisam thanks for reply but is there any way to get skill names passed to server without serialize as i have to append a limit attribute to my search_param which is an object. Basically i want all post data in search_param.data and my limit in search_param.limit....

Nisam Over a year ago

the values get in array $('input[name="skill[]"]').map(function(){return $(this).val();});

George Joffin Joy Over a year ago

i have updated in question wat u said but i am getting an error like : Uncaught TypeError: Illegal invocation please check updated question...

Nisam Over a year ago

yes u r on the right way.. is skill, skill_hid are multiple inputs ..?

Nisam Over a year ago

sorry, please change the array value get method like this,$('input[name="skill[]"]').map(function(){return $(this).val();}).get();.. Please attache .get() for every array get element.. this will solve your error

|

Mathias · Accepted Answer · 2014-03-14 09:31:01Z

0

Try this: http://jsfiddle.net/borglinm/p8hY7/

You iterate over all the inputs and build an array

var inputs = [];
$("input").each(function(index, elem) {
    inputs.push(elem.value);
});
var postData = {
    'data': inputs,
    'otherParam': 1
}
console.log(postData);

answered Mar 14, 2014 at 9:31

Mathias

5,6912 gold badges33 silver badges47 bronze badges

Collectives™ on Stack Overflow

How to pass Multiple input array element values having same name like ex: sikll[] via Ajax POST

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related