Form submission not showing multiple checkbox values

Support
1

Hi, I am testing out sending a basic form using Netlify with checkbox groups to select multiple checkboxes at once. However, when the form is sent, it only ever returns the last checkbox value selected, not ALL of them.

Right now I’m using basic html5 markup for the checkboxes (with the same name attribute for them all because they are in a group). I’ve tried removing the extraneous javascript that turns the form into steps, I’ve even tried wrapping them in a fieldset, but no luck.

I am submitting the form using ajax:

$("#main #online-quote-form form").submit(function(e) {
  e.preventDefault();

  var $form = $(this);
  $.post($form.attr("action"), $form.serializeArray()).then(function() {
    $("#online-quote-form-message").html("<div>Thank you for your submission! <span>I'll get back to you soon.<a class='btn btn--small btn--success' href='javascript:history.back()'>Take me back</a></span></div>");
$('form').hide();
  });
});

Is there something I’m missing? If I need to implement a javascript-based solution, no problem, but it shouldn’t be necessary on basic form submission like this I would think, at least not according to Netlify’s form documentation.

The submission email should list ALL the checkbox values selected, not just the last one selected.

If anyone can help, I’d really appreciate it. Thanks so much!

2

Hi @mgenest,

Can you link to the live form and share the HTML that you’re deploying as well? We’ll need to see that to help you debug.

3

Hi @futuregerald

Actually, I’ve solved it by adding name="string[]" to any checkbox value group so it will return an array instead of just one value. Seems to work now.

Thanks!

5 Likes
4

thanks for coming back and letting us know the fix! this helps so many future users =]

5

Perfect!!! Thanks so much!

1 Like
6

Hi, Is it possible to give an example of it? For me, it sends the check box values as an array when I run it netlify dev.

[ ‘JavaScript’, ‘Python’ ]

But, the same code when I deploy on Netlify, doesn’t go as an array. It always prints the first element instead.

Here is my check-boxes section inside the HTML form

<div>
            <h2>Interests</h2>
            <label>
                <input type="checkbox" id="js" name="interests" value="JavaScript"> JavaScript
            </label>

            <label>
                <input type="checkbox" id="python" name="interests" value="Python"> Python
            </label>

            <label>
                <input type="checkbox" id="php" name="interests" value="PHP"> PHP
            </label>
        </div>

Could you please tell me what’s probably going wrong?

Please Note: The form data goes like this when it is deployed on Netlify

image

1 Like
7

Hey there, @atapas :wave:

Thanks for reaching out! Sorry to hear you have encountered some forms difficulties.

It looks like this thread has been a bit quiet this week. Are you still encountering this issue? If so, this Support Guide is the first port of call to debug any forms issues. There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

If you are still having problems after reading that guide, please provide the following information:

  1. The URL for your live form as you want visitors to use it
  2. The URL of your deployed html form. In case you have a javascript form, we need to literally be linked to the html version you’ve deployed, as mentioned above (look for “ pure javascript form ”)
  3. The form name that you’ve set and that shows in our UI
  4. Any errors or logs from the Netlify build logs, dashboard or browser developer console
  5. Description of anything you have tried that did or didn’t help or make things better/worse

Thank you :slight_smile:

8

I fell into this pit and I had to add [] to the names of the checkbox elements. When I did this, Netlify’s form submissions started showing me an array of items, rather than a single item.

Is this in the Netlify Forms tutorial somewhere and I missed it? I just now took a quick look and didn’t notice it. This seems like something that deserves some highlighting.

Thank you.

1 Like
9

Hey there, @jbrains :wave: Thanks for sharing this feedback with us. I have gone ahead and passed this along to our Documentation team.

1 Like