jQuery - set array values to the input with the same name

Question

I was trying to set the array values to the input field named attachments[]

I have array stored in js variable attachArray

What I have tried is,

$('[name="attachments"]').attr('value', attachArray);

or

$('[name="attachments"]').val(attachArray);

But getting empty attachments in the controller like this,

array(1) { ["attachments"]=> array(1) { [0]=> string(0) "" } }

What I'm doing wrong?

EDIT

<div class="col-md-4">
    <div class="form-group ticket-align">
        <label>Attachment</label>
        <label class="btn btn-primary" data-toggle="modal" data-target="#t-attachment-modal">
                    Browse&hellip; 
             <input type="hidden" name="attachments[]">
         </label>
         <span id="fileList"></span>
         <span class="error" id="error-atachments" style='display: none;'></span>
    </div>
</div>

So $('[name=attachments\\[\\]]').val(attachArray); OR $('input:hidden[name=attachments\\[\\]]').val(attachArray); will work — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Sep 13, 2017 at 10:54

lumio · Accepted Answer · 2017-09-13 11:16:46Z

8

As far as I understand is that you want to spread the content of an JavaScript array to multiple fields that PHP on the other hand interprets as an array.

I changed the inputs from hidden to text just to make it a little bit more clear and so you can see how the values do look like. Don't forget to undo this in your code.

const attachArray = [
  'val1',
  'val2',
];
const attachments = $('[name="attachments[]"]');
for ( let i = 0; i < attachments.length; i += 1 ) {
  $( attachments[ i ] ).val( attachArray[ i ] );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4">
    <div class="form-group ticket-align">
        <label>Attachment</label>
        <label class="btn btn-primary" data-toggle="modal" data-target="#t-attachment-modal">
                    Browse&hellip; <br>
             <input type="text" name="attachments[]"><br>
             <input type="text" name="attachments[]">
         </label>
         <span id="fileList"></span>
         <span class="error" id="error-atachments" style='display: none;'></span>
    </div>
</div>

But this is a lot of code to do. I think it might be easier to send the array as JSON and use PHPs json_decode to convert it back into an array, like so:

const attachArray = [
  'val1',
  'val2',
];
$('[name="attachments"]').val( JSON.stringify( attachArray ) );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4">
    <div class="form-group ticket-align">
        <label>Attachment</label>
        <label class="btn btn-primary" data-toggle="modal" data-target="#t-attachment-modal">
                    Browse&hellip; <br>
             <input type="text" name="attachments">
         </label>
         <span id="fileList"></span>
         <span class="error" id="error-atachments" style='display: none;'></span>
    </div>
</div>

And do something like

$attachments = json_decode( $_POST[ 'attachments' ] );

edited Sep 13, 2017 at 11:16

answered Sep 13, 2017 at 11:03

lumio

7,6054 gold badges42 silver badges60 bronze badges

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

2 Comments

lumio Over a year ago

I know. I changed it to make it more clear what happens

Keyur Over a year ago

Thanks. This solution is more reliable.

Death-is-the-real-truth · Accepted Answer · 2018-10-17 07:27:51Z

6

Since it's a hidden input, so

Either:-

$('[name=attachments]').val(attachArray);

OR

$('input:hidden[name=attachments]').val(attachArray);

Will work.

Note:- Use the backslashes(Escape internal brackets with \\(no space)).

edited Oct 17, 2018 at 7:27

answered Sep 13, 2017 at 10:56

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

3 Comments

Keyur Over a year ago

I removed the [] from the input name field. And used this $('[name=attachments]').val(attachArray);. This workes better than @lumio's solution.

huykon225 Over a year ago

why the value is: [object Object]

Viswa Over a year ago

@huykon225 Even I got the result as [Object Object] saved in the hidden field, but tried below to stored the value as array and get the value as array.

var elems = []; elems.push('1');  elems.push('2');  elems.push('3');  $('#input_hidden_field').val(JSON.stringify(elems)); //store array  var value = $('#input_hidden_field').val(); //retrieve array value = JSON.parse(value);

Arun Kumaresh · Accepted Answer · 2017-09-13 10:55:48Z

4

you have input field with name as attachments[] so try this

$('[name="attachments[]"]').val(attachArray);

answered Sep 13, 2017 at 10:55

Arun Kumaresh

6,2966 gold badges36 silver badges50 bronze badges

Comments

Rabby · Accepted Answer · 2020-09-23 11:04:35Z

0

Mention id to a hidden field and you are sending array through the form so declare hidden field name with square brackets like below.

<input type="text" name="attachments[]" id="attachments">

And bind your array with the jquery val() method.

$('#attachments').val(attachArray);

For Future Reference :-)

answered Sep 23, 2020 at 11:04

Rabby

3244 silver badges15 bronze badges

Collectives™ on Stack Overflow

jQuery - set array values to the input with the same name

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related