Add a Javascript array to POST variable on form submit

Question

I have a Javascript array that I would like to add to the post array when a form is submitted. The Javascript array should be added in addition to other variables already being posted from the form. Is there a way to do this in JQuery?

Ex.

Form:

<form id="my-form" action="/create.php" method="post">
<input id="first_name" type="text" /> 
<input id="last_name" type="text" /> 
</form>

Javascript array:

<script type="text/javascript">

var external_ids = [{"name":"SSN","value":"555-55-5555"},    
{"name":"PID","value":"GBNT22"}];

</script>

This is what I would like the resulting PHP $_POST array to look like, if possible:

Array
(
    [first_name] => John
    [last_name] => Smith
    [external_ids]=>
        (
            [SSN] => 555-55-5555
            [PID] => GBNT22
        )
)

see this: stackoverflow.com/questions/3322632/…

haroonxml
– haroonxml

2012-06-27 13:34:44 +00:00
Commented Jun 27, 2012 at 13:34 — haroonxml
– haroonxml, Commented Jun 27, 2012 at 13:34

Marc · Accepted Answer · 2012-06-27 13:44:45Z

2

There you go:

var external_ids = [{"name": "SSN", "value": "555-55-5555"},
                    {"name": "PID", "value": "GBNT22"}];

// form fields
var values = {};
var fields = $('#myForm :input');
$.each(fields, function(i, field) {
    var dom = $(field),
        name = dom.attr('id'),
        value = dom.val();
    values[name] = value;
});

// add array
values.external_ids = {};
$.each(external_ids, function(i, field) {
    values.external_ids[field.name] = field.value;
});

// post data
$.post('/endpoint', values);

Find the code in this jsfiddle as well.

answered Jun 27, 2012 at 13:44

Marc

6,7919 gold badges51 silver badges79 bronze badges

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

Comments

Stefano Ortisi · Accepted Answer · 2012-06-27 13:49:10Z

1

There is the serialize() function on jQuery. Had you check this?

Or you can use something like this:

function onSubmit(){
    var toSend = [
        first_name : 'John',
        last_name : 'Smith',
        external_ids : {
            SSN: '555-55-5555',
            PID: 'GBNT22'
        }
    ];

    $.post( yourUrl, toSend, function(data){
        //callback
    } );

}

edited Jun 27, 2012 at 13:49

answered Jun 27, 2012 at 13:34

Stefano Ortisi

5,3163 gold badges35 silver badges44 bronze badges

1 Comment

Stephen305 Over a year ago

How would this look in a JQuery event handler?

Collectives™ on Stack Overflow

Add a Javascript array to POST variable on form submit

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related