How does Zurb Foundation Switch control work

Question

I recently started using Zurb Foundation 4 for an Asp MVC website and I don't quite understand how the switch control is supposed to work. The docs don't say much http://foundation.zurb.com/docs/components/switch.html

<div class="switch">
  <input id="x" name="switch-x" type="radio" checked>
  <label for="x" onclick="">Off</label>

  <input id="x1" name="switch-x" type="radio">
  <label for="x1" onclick="">On</label>

  <span></span>
</div>

I'm using this example code, when I click on the switch, there is no change in the html. I figured the "checked" attribute would go on the second input, but this is not the case.

• How can I detect which radio button has been clicked ?

When I POST the form, the "switch-x" variable contains the value "on" no matter what position the switch is in.

I tried adding an onclick event on the label, but it's not getting fired as something seems to be overlapping the label.

I'm using foundation's javascript, I don't have any errors on the page.

I'm definitely missing something... Any ideas ?

Answer 1

When I POST the form, the "switch-x" variable contains the value "on" no matter what position the switch is in.

You need to add a value in your input fields to have the $_POST["switch-x"] value, as :

<div class="switch">
  <input id="x" name="switch-x" type="radio" value="0" checked>
  <label for="x" onclick="">Off</label>

  <input id="x1" name="switch-x" type="radio" value="1">
  <label for="x1" onclick="">On</label>

  <span></span>
</div>