Jquery sending key/value paired array to PHP

Question

To be honest Im not sure how to frame this question, but here goes.

I have a form with the following input fields:

<input name="key[23]" type="text" />
<input name="key[29]" type="text" />
<input name="key[65]" type="text" />

I can create an array with Jquery to send to the PHP script like so:

    var new_keys = new Array();
$('input[name="keys[]"]').each(function() {
    new_keys.push($(this).attr('value'));
});

However I dont know how to create the array when the input fields already have a key: input name="test[45]"

I tried changing my method to using a class selector instead of the input name, but I cant get the keyname.

What I need to do is send the keyname and its value to PHP so I can update a table where the keyname equals the table ID number. This is simple to do if I wasnt using Ajax.

Hope that makes sense.

Edited

<form method="post" id="add-form" class="form" onsubmit="return false;">
<input class="required" type="text" name="name" id="name" />
<input class="required" type="text" name="keys[32]" />
<input class="required" type="text" name="keys[65]" />
<textarea name="Test"></textarea>
<input type="submit" name="submit" value="submit" />
</form>

$(document).ready(function() {
    $.fn.submitForm = function() {
        var name = $('#name').attr('value');
        var new_keys = new Array();
        $('input[name="keys[]"]').each(function() {
            new_keys.push($(this).attr('value'));
        });

        $.ajax({
            type: 'POST',
            data: { 'new_keywords' : new_keywords, 'name' : name },
            dataType: 'json',
            url: 'article/scripts/article.scripts.php',
            success: function($data) {
                var result = $data.result;
                var msg = $data.msg;

                if (result == "success") {
                    formMessageDisplay(msg, result);
                }
                else {
                    formMessageDisplay(msg, result);
                }
            },
            error: function($data) {
                formMessageDisplay('<?php echo AJAX_ERROR; ?>', result);
            }
        })
    }
});

This is a cutdown version of the script that I have.

Just to add, the keynames are dynamic and not static.

Mark Lawrence
– Mark Lawrence

2012-07-23 17:16:20 +00:00
Commented Jul 23, 2012 at 17:16 — Mark Lawrence
– Mark Lawrence, Commented Jul 23, 2012 at 17:16

MasterGberry · Accepted Answer · 2012-07-23 17:20:58Z

1

You could do something like this which should grab the names of the fields and then assign the values in the array. You can then process and clean it up in PHP as needed:

var new_keys = new Array();
$('input[name="keys[]"]').each(function() {
    new_keys[$(this).attr('name')] = $(this).attr('value');
});
$.post('url/to/script/here.php', new_keys, function(data) {
    // process data here on success
}, 'json'); // expecting a json object

For further reading on ajax look @ this for using the post method http://api.jquery.com/jQuery.post/

answered Jul 23, 2012 at 17:20

MasterGberry

2,8606 gold badges40 silver badges60 bronze badges

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

2 Comments

Mark Lawrence Over a year ago

Thanks for that. However if I add an alert before 'new_keys', nothing happens. $('input[name="keys[]"]') doesnt seem to match the selector as the input name has a keyname. If I changed that line to $('input[name="keys[29]"]') then it will match the input field with the name keys[29] and that line will be submitted. Does that make sense?

Mark Lawrence Over a year ago

From your script I changed mine to:

var old_keywords = new Array(); $('.old-keys').each(function() { old_keywords[$(this).attr('id')] = $(this).attr('value'); });

Which is now working fine

Palladium · Accepted Answer · 2012-07-23 17:18:56Z

0

You can try passing the values as an array and the names as another array, then combine them in PHP with array_combine(), like so:

var new_keys = new Array();
var new_names = new Array();
$('input[name="keys[]"]').each(function() {
    new_keys.push($(this).attr('value'));
    new_names.push($(this).attr('name'));
});

//Then in PHP
$complete_array = array_combine($new_names, $new_keys);

answered Jul 23, 2012 at 17:18

Palladium

3,7734 gold badges17 silver badges19 bronze badges

Comments

aztechy · Accepted Answer · 2012-07-23 17:32:37Z

0

Just to clarify you have a form, that you want to send the values off to a php script via javascript/ajax?

If that's the case then you'll have something like:

HTML:

<form id="myForm" action="phpScript.location" method="post">
   <input/>...
   <input/>...
</form>

Javascript/jQuery:

    $('form').bind('submit', function() {
        $.ajax({
            url: 'phpScript/location',
            data: $('form').serialize(),  // This will give you the needed key/pair parameterization you need. 
            type: 'POST',
            dataType: 'html', // This can be one of many values.  Just defines the expected response type. 
            success: function(data, status, xhr) {
                // Success response
            },
        });
        return false;
    });

Serialize documentation here: http://api.jquery.com/serialize/

answered Jul 23, 2012 at 17:32

aztechy

6407 silver badges15 bronze badges

2 Comments

Mark Lawrence Over a year ago

I tried to serialize the fields like so: var old_keywords = $('.old-keys').serialize(); This serializes the query string for input fields with the correct class, but it doesnt include the name with keyname. var keys = $('input[name="keys[]"]').serialize(); doesnt work as the keyname is absent.

aztechy Over a year ago

What's your expected parameters within the php script? Is it a key/pair such as: "key[##] => value"? Or are you looking for a parameter called 'key' with a range of values, ie: key => 1,2,4,5...?

Collectives™ on Stack Overflow

Jquery sending key/value paired array to PHP

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related