Add Javascript array to form input

Question

I am building a group mailing system with VueJS and jQuery for the front-end, Laravel 5 for the back-end.

I am using AJAX calls to retrieve a listing of users based on groups, agencies, or all active users. The user may then remove addresses based on these results in the DOM (VueJS data) and manually add new addresses.

The form includes a file so I cannot (or do not want to, based on compatibility concerns) send the form data using an AJAX call. The problem is that I need to send the listing of email addresses along with the form when the user submits it.

Here is the Javascript. The most relevant part is the serializeRecipients method where I append each email address to hidden form fields:

var vm = new Vue({
    el: '#emailContainer',
    data: {
        recipients: [
            {
               name: "Joe Smith",
               email: "[email protected]"
            }
        ],
        individualRecipients: [],
        manualRecipient: null,
        validation: {
            email: true
        }
    },

    methods: {
        //
        serializeRecipients: function() {
            var recipientAddresses = [];
            var individualRecipientAddresses = [];
            $.each(this.recipients, function (k, recipient) {
                recipientAddresses.push(recipient['email']);
            });
            $.each(this.individualRecipients, function(k, recipient) {
                individualRecipientAddresses.push(recipient);
            });

            $("#recipientsInput").val(recipientAddresses);
            $("#individualRecipientsInput").val(individualRecipientAddresses);
        }
    }
});

On the form element I use v-on="submit: serializeRecipients". This generates this form output: [email protected], [email protected], which I am then using PHP's explode() function to transform into an array.

This all works but I'm left wondering if there is a better way to accomplish this. Any suggestions would be appreciated!

Answer 1

You could just join the array into a string and then parse it on the server.

$("#recipientsInput").val(recipientAddresses.join(','));
$("#individualRecipientsInput").val(individualRecipientAddresses.join(','));

So:

['[email protected]', '[email protected]', '[email protected]']

Would become:

'[email protected],[email protected],[email protected]'

Then on the server you could split up that field by commas.