Input Checkbox Doesn't Submit

Question

I have 2 switches inside a Laravel Form where I already give default value as 0. As soon as I submit, I got all values in my form, but those 2 switches.

I'm wondering if I did anything that I'm not suppose to.

---

HTML

<div class="col-xs-2">
    <label class="control-label">Multisite VPN</label> <br>
    <input type="checkbox" name="vpn" id="vpn" value="0">
</div>

<div class="col-xs-2 mb10">
    <label class="control-label">UPnP</label> <br>
    <input type="checkbox" name="upnp" id="upnp" value="0">
</div>

---

JS

<script type="text/javascript">

    var vpn  = $('#vpn');
    var upnp  = $('#upnp');

    //Ativate the Switches
    vpn.bootstrapSwitch('size', 'mini');
    upnp.bootstrapSwitch('size', 'mini');


    vpn.on('switchChange.bootstrapSwitch', function (event) {
        if (vpn.is(':checked')) {
            vpn.val(1);
        } else {
            vpn.val(0);
        }
        console.log('vpn: ' + vpn.val());
    });

    upnp.on('switchChange.bootstrapSwitch', function (event) {
        if (upnp.is(':checked')) {
            upnp.val(1);
        } else {
            upnp.val(0);
        }
        console.log('upnp: ' + upnp.val());
    });

</script>

---

Form

---

inputs

array:17 [▼
  "_token" => "brXS4YGTGnD7QzkHuvbAyZsmSC8nUB9vxywB4bXK"
  "name" => "silver"
  "p_max_up" => "128"
  "p_max_down" => "128"
  "p_ip" => "111111111"
  "p_netmask" => "2222222222"
  "p_max_user" => "50"
  "p_dns" => "333333333"
  "p_dns2" => "4444444444"
  "g_max_up" => "128"
  "g_max_down" => "128"
  "g_ip" => "5000000"
  "g_netmask" => "6000000"
  "g_max_user" => "22"
  "g_dns" => "888888888"
  "g_dns2" => "9999999999"
  "g_portal" => "http://www.bunlongheng.com"
]

---

If

I turn 2 those switches ON , I seems to get it

array:19 [▼
  "_token" => "brXS4YGTGnD7QzkHuvbAyZsmSC8nUB9vxywB4bXK"
  "name" => "silver"
  "vpn" => "1" <--------- HERE 
  "upnp" => "1" <--------- HERE
  "p_max_up" => "128"
  "p_max_down" => "128"
  "p_ip" => "111111111"
  "p_netmask" => "2222222222"
  "p_max_user" => "50"
  "p_dns" => "333333333"
  "p_dns2" => "4444444444"
  "g_max_up" => "128"
  "g_max_down" => "128"
  "g_ip" => "5000000"
  "g_netmask" => "6000000"
  "g_max_user" => "22"
  "g_dns" => "888888888"
  "g_dns2" => "9999999999"
  "g_portal" => "http://www.bunlongheng.com"
]

Why that 2 inputs submit only if the switches is ON/True ?

---

Any hints ?

Answer 1

When forms are submitted in HTML, unchecked checkboxes (which are the basis for your switches) are not transmitted. Only checked checkboxes are transmitted with the form when it is submitted. You could use hidden inputs and/or javascript to record if the checkboxes were ever checked or not and transmit those values instead.