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!

ChevCast · Accepted Answer · 2015-06-04 19:28:25Z

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.

edited Jun 4, 2015 at 19:28

answered Jun 4, 2015 at 19:25

ChevCast

59.4k66 gold badges223 silver badges330 bronze badges

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

7 Comments

NightMICU Over a year ago

I'm already getting a comma separated value with the code I have so far. The recipientAddresses array consists of objects, so I need the email property. However, individualRecipientAddresses is just a plain array, so I like your suggestion for that - less code.

ChevCast Over a year ago

Gotcha, sorry. I must have skimmed the last paragraph of your question. I think what you're doing is pretty standard. I'm not sure there is a better way.

NightMICU Over a year ago

Sorry about that, should have added an object to that array to make it more clear (edited). This could have about a hundred recipients (or more), think this approach is still okay? Really can't think of other options without being able to use AJAX..

ChevCast Over a year ago

Yeah I mean, if you can't post to the server with AJAX or over a websocket then it's gotta make it up there somehow right? The only other way I could think of is to dynamically add input elements to your form for each address, but that would be more code and probably even less performant. So yeah, I think a couple hundred addresses in a single field won't hurt. Hell, ASP.NET Web Forms uses a hidden form field to track view state and that sucker gets so large that Chrome lags when you view source on some of those sites :P

ChevCast Over a year ago

@NightMICU, totally understand if this answer didn't end up being your solution, but if it did then don't forget to accept it ;)

|

Collectives™ on Stack Overflow

Add Javascript array to form input

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related