Laravel - AJAX POST Array of Choices from Checkboxes

Question

I have an AJAX Post that I'm trying to fix, but with a multitude of checkboxes on the input, I'm getting stuck.

At the moment, say I've this:

<input type="checkbox" name="billToEmail[]" value="[email protected]">[email protected]
<input type="checkbox" name="billToEmail[]" value="[email protected]">[email protected]

And I've a button called "Send Notifications", which starts the following script:

<script>
$('.modal-footer').on('click', '.sendNotificationNow', function() {
    $.ajax({
        type:'POST',
        url: '/shipments/sendNotifications',
        data: {
            'billTo': $('.billToEmail:checked').val(),
            'shipTo': $('.shipToEmail:checked').val(),
            'shipFrom': $('.shipFromEmail:checked').val(),
            '_token': $('input[name=_token]').val(),
        },
        success: function(data) {
            $('.errorTitle').addClass('hidden');
            $('.errorContent').addClass('hidden');

            if ((data.errors)) {
                setTimeout(function () {
                    $('#sentNotifications').modal('show');
                    toastr.error('Validation error - Check your inputs!', 'Error Alert', {timeOut: 5000});
                }, 500);

                if (data.errors.title) {
                    $('.errorTitle').removeClass('hidden');
                    $('.errorTitle').text(data.errors.title);
                }

                if (data.errors.content) {
                    $('.errorContent').removeClass('hidden');
                    $('.errorContent').text(data.errors.content);
                }
            } else {
                toastr.success('Successfully Sent Notifications!', 'Success Alert', {timeOut: 5000});
                $('div.notificationssent').fadeOut();
                $('div.notificationssent').load(url, function() {
                    $('div.notificationssent').fadeIn();
                });
            }
        },
    });
});
</script>

Now, I'm sure my issues are popping up near the top, where I'm trying to "translate" the multiple values into the data variables. Should I be putting something besides .val()?

I've a few more fields like this that I need to work on with the multiple checkboxes but if I can get some help for the billToEmail alone, I'm sure I can fix the remainder.

In jQuery docs for .val(), it says "Get the current value of the first element in the set of matched elements". Note "first element". It sounds like you want all the values in an array, so check the answers to this question — James
– James, Commented Dec 18, 2017 at 19:17

Dhihan Laksana Aji Anggana · Accepted Answer · 2017-12-19 06:15:06Z

First, you don't need the [] sign. So, your checkbox html will look like this :

<input type="checkbox" name="billToEmail" value="[email protected]">[email protected]
<input type="checkbox" name="billToEmail" value="[email protected]">[email protected]

Second, you need to push selected value on checkbox into javascript array variable using foreach :

var billToEmail= [];

$("input:checkbox[name=billToEmail]:checked").each(function(){
  billToEmail.push($(this).val());
});

Third, you need to convert javascript array into string using JSON.stringify().

billToEmails= JSON.stringify(billToEmail);

Then after that, pass the billToEmails variable into your data in AJAX. So, it will look like this :

var dataString = "billTo="+billToEmails+"&shipTo="+$('.shipToEmail:checked').val()+"&shipFrom="+$('.shipFromEmail:checked').val()+"&_token="$('input[name=_token]').val();
$.ajax({
        type:'POST',
        url: '/shipments/sendNotifications',
        data: dataString,

In order to PHP can fetch the array, you need to decode the billToEmails string first using json_decode in your controller.

$variable = json_decode($request->billTo,true);

Shubham Pokhriyal · Accepted Answer · 2017-12-19 07:04:31Z

0

Try this-

  billtoemail = $('input[name='billToEmail[]']:checked").map(function () {
      return this.value;
  }).get();

or

billtoemail= new Array();
$("input[name='billToEmail[]']").each(function(){
  billtoemail.push(this.value);
 });

Now send this variable billtoemail like other variable in your ajax. In your controller you can get all the values by a simple foreach($request->billTo as $billtoemail)

answered Dec 19, 2017 at 7:04

Shubham Pokhriyal

5121 gold badge7 silver badges17 bronze badges

Collectives™ on Stack Overflow

Laravel - AJAX POST Array of Choices from Checkboxes

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related