Gin: Bind a checkbox group

Created on 30 Sep 2014  路  7Comments  路  Source: gin-gonic/gin

Hey I have the following code:

<input type="checkbox" name="colors" value="red">Red&nbsp;
<input type="checkbox" name="colors" value="green">Green&nbsp;
<input type="checkbox" name="colors" value="blue">Blue&nbsp;
<input type="checkbox" name="colors" value="black">Black&nbsp;
<input type="checkbox" name="colors" value="white">White&nbsp;

What is the correct way to bind them (using Bind Middleware) to obtain all data from them? I'm binding to an string but I only get the first one, if I bind to a slice I get an error.

Any ideas? Does Bind support this?

This is done in other languages by naming the group as an array:

<input type="checkbox" name="colors[]" value="purple">Purple&nbsp;

Then my struct will have a slice to bind. But I can't seem to make it work here.

question

Most helpful comment

Yes, it's works for me (with the v1.0rc2 of Gin) :
In the main.go :

package main

import (
    "github.com/gin-gonic/gin"
)

type myForm struct {
    Colors []string `form:"colors[]"`
}

func main() {
    r := gin.Default()

    r.LoadHTMLGlob("views/*")
    r.GET("/", indexHandler)
    r.POST("/", formHandler)

    r.Run(":8080")
}

func indexHandler(c *gin.Context) {
    c.HTML(200, "form.html", nil)
}

func formHandler(c *gin.Context) {
    var fakeForm myForm
    c.Bind(&fakeForm)
    c.JSON(200, gin.H{"color": fakeForm.Colors})
}

And the form ("views/form.html") :

<form action="/" method="POST">
    <p>Check some colors</p>
    <label for="red">Red</label>
    <input type="checkbox" name="colors[]" value="red" id="red" />
    <label for="green">Green</label>
    <input type="checkbox" name="colors[]" value="green" id="green" />
    <label for="blue">Blue</label>
    <input type="checkbox" name="colors[]" value="blue" id="blue" />
    <input type="submit" />
</form>

If we check all colors, the result is like :

{"color":["red","green","blue"]}

All 7 comments

Hmm I haven't tested it, but in Gorilla that would work like this:

type Form struct {
 Colors []Color
}

and the form would look like this:

<input type="checkbox" name="Colors.0.Color" value="red">
<input type="checkbox" name="Colors.1.Color" value="green">
<input type="checkbox" name="Colors.2.Color" value="blue">
<input type="checkbox" name="Colors.3.Color" value="black">
<input type="checkbox" name="Colors.4.Color" value="white">

I'm reading the code on Binding and AFAIK is not supported. Apparently slices are supported but not the way checkboxes work, just with json or xml body. Maybe I will start using Gorilla for that.

Use this HTML syntax :

<input type="checkbox" name="colors[]" value="purple" id="purple">
<label for="purple">Purple</label>

In your Go structure, defined a string array for your checkboxes :

type Form struct {
 Colors []string `form:"colors[]"`
}

Your result will be an array like this :

[purple red green blue black white]

@EtienneR does that really works? it would be interesting to add a unit test for that!

Yes, it's works for me (with the v1.0rc2 of Gin) :
In the main.go :

package main

import (
    "github.com/gin-gonic/gin"
)

type myForm struct {
    Colors []string `form:"colors[]"`
}

func main() {
    r := gin.Default()

    r.LoadHTMLGlob("views/*")
    r.GET("/", indexHandler)
    r.POST("/", formHandler)

    r.Run(":8080")
}

func indexHandler(c *gin.Context) {
    c.HTML(200, "form.html", nil)
}

func formHandler(c *gin.Context) {
    var fakeForm myForm
    c.Bind(&fakeForm)
    c.JSON(200, gin.H{"color": fakeForm.Colors})
}

And the form ("views/form.html") :

<form action="/" method="POST">
    <p>Check some colors</p>
    <label for="red">Red</label>
    <input type="checkbox" name="colors[]" value="red" id="red" />
    <label for="green">Green</label>
    <input type="checkbox" name="colors[]" value="green" id="green" />
    <label for="blue">Blue</label>
    <input type="checkbox" name="colors[]" value="blue" id="blue" />
    <input type="submit" />
</form>

If we check all colors, the result is like :

{"color":["red","green","blue"]}

@manucorporat anyways to update the binding section of the doc ? EtienneR's solution works for me too.

Is there a way to bind a slice of structs like this using formData in JS?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mdnight picture mdnight  路  3Comments

sofish picture sofish  路  3Comments

mastrolinux picture mastrolinux  路  3Comments

gplume picture gplume  路  3Comments

frederikhors picture frederikhors  路  3Comments