javascript add array item to form value

Question

I have a form with a hidden field:

<input type="hidden" name="newdesc[]" id="newdesc" />

I have an autolookup and a plus button so the plus button adds the field value of the autolookup to an array:

newdesc_a.push(document.getElementById('autocomplete1').value);
var x=document.getElementById("businesslist");
x.innerHTML=newdesc_a;
document.getElementById('newdesc').value = newdesc_a;

(newdesc_a is previously declared as an array)

It updates the div OK (businesslist) but does not assign the value to the newdesc.

I am sure it is simple but it is driving me mad!

Raffaele · Accepted Answer · 2012-10-23 11:18:07Z

3

Given the name="newdesc[]" attribute, I assume PHP on the server side. When you submit a key two or more times, only the last value is available in the script via $_REQUEST. In the case of a key ending with [] , instead, PHP builds an array and make it available to your script via $_REQUEST['key']. Note that this behavior is application-specific, there's nothing like an array at the HTTP level.

Now, you want to pass an array from the client side (Javascript) to the backend (PHP). You have two options:

Use a proprietary format, eg separate values by commas or colons, and split the string on the server side (or you can use an existing format like JSON, XML, ...)
Take advantage of the PHP syntax for passing arrays

It seems you want to adopt the 2nd way, so you will want to submit a form like the following

<input name="email[]" value="[email protected]" />
<input name="email[]" value="[email protected]" />
<input name="email[]" value="[email protected]" />

PHP will be able to access a plain array in $_REQUEST if you build your form like this. Now, you have the problem of building the form programmatically on demand. This is the best I can think of (jQuery):

var email = $("#autocomplete").value;

// if you really need to keep emails in an array, just
// emails.push(email);

$('<input type="hidden">').attr({
    name: 'email[]',
    value: email
}).appendTo('#myForm');

edited Oct 23, 2012 at 11:18

answered Oct 23, 2012 at 11:10

Raffaele

20.9k7 gold badges50 silver badges89 bronze badges

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

2 Comments

Jim Elliott Over a year ago

Thanks. I have no problem usually in passing an array as a POST but it is simply a case of getting the javascript to assign it to the value of the form field.

Raffaele Over a year ago

No, you don't undestand the principle. If you want a prebuilt array in PHP, you want to adopt my solution. If you want to assign an array to an input field, well you have to manually serialize it (array -> string) on the client side (joining strings by commas, or JSON for example) and deserialize (string -> array) on the server. See this fiddle to get a taste. Note that on the server side you won't have an array: you'll have a string, which you will manually convert back to a PHP array

KA. · Accepted Answer · 2012-10-23 10:49:54Z

0

You want to assign a particular value of array to that element?

You can use like this.

document.getElementById('newdesc').value = newdesc_a.index;

where 'index' is the index of array. replace it.

answered Oct 23, 2012 at 10:49

KA.

4,5545 gold badges28 silver badges38 bronze badges

6 Comments

Elias Van Ootegem Over a year ago

if it's an array, it should read newdesc_a[index], not .index, to avoid syntaxError

Jim Elliott Over a year ago

newsdesc_a now contains the full array so my idea is to completely replace the vale of newdesc

KA. Over a year ago

You can do it like one of the 2 below options. 1. JSON.stringify(array) and assign string value. 2. Append each value using for loop

Jim Elliott Over a year ago

var y = JSON.stringify(newsdesc_a); document.getElementById('newdesc').value = y;

KA. Over a year ago

did you try using for loop? Check if array has values either by alert(JSON.stringify(newsdesc_a)); or console.log(newsdesc_a); (you can see array value in the console.)

|

Collectives™ on Stack Overflow

javascript add array item to form value

2 Answers 2

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related