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>

Answer 1

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' ] );

Answer 2

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)).