title: Function for serialization doesn't see values of checkboxes and radio buttons
body: <p>I've made custom function for serialization of form inputs. Problem occurs when form is inside a bootstrap modal and checkbox and/or radio buttons returned value is undefined. How can that be? Works well if it's "standard" form i.e when form is not inside a modal. I also checked if particular checkbox/radio button exists which is always true. For text and other type fields presence of a value is not important. They can return an empty string which is fine.</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div class="container"&gt;
      &lt;!-- Modal --&gt;
      &lt;div class="modal fade" id="myModal1" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
  
        &lt;!-- Modal content--&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
            &lt;h4 class="modal-title"&gt;Update/Izmena&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
  
            &lt;div class="container-fluid text-center" style="font-family:Palatino Linotype;"&gt;
      &lt;form id="F3"&gt;
          &lt;div class="row"&gt;
              &lt;div class="form-group col-sm-3"&gt;
                  &lt;label for="k_ime"&gt;Korisničko ime:&lt;/label&gt;
                  &lt;input type="text" class="form-control" id="k_ime1" maxlength="30" placeholder="Unesi korisničko ime:" name="k_ime1" value="" required&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group col-sm-3"&gt;
                  &lt;label for="pwd"&gt;Šifra:&lt;/label&gt;
                  &lt;input type="password" class="form-control" id="pwd1" maxlength="30" placeholder="Unesi željenu šifru" name="pwd1" value="" required&gt;
              &lt;/div&gt;
              &lt;div class="form-group col-sm-3"&gt;
                  &lt;label for="ime"&gt;Ime:&lt;/label&gt;
                  &lt;input type="text" class="form-control" id="ime1" maxlength="30" placeholder="Unesi ime:" name="ime1" value="" required&gt;
              &lt;/div&gt;
              &lt;div class="form-group col-sm-3"&gt;
                  &lt;label for="prezime"&gt;Prezime:&lt;/label&gt;
                  &lt;input type="text" class="form-control" id="prezime1" maxlength="30" placeholder="Unesi prezime:" name="prezime1" value="" required&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;   
              &lt;div class="form-group col-sm-3"&gt;
                  &lt;label for="email"&gt;Email:&lt;/label&gt;
                  &lt;input type="email" class="form-control" id="email1" maxlength="30" placeholder="Unesi email:" name="email1" value="" required&gt;
              &lt;/div&gt;
              &lt;div class="form-group col-sm-3"&gt;
                  &lt;label for="tel"&gt;Telefon:&lt;/label&gt;
                  &lt;input type="number" class="form-control" id="tel1" maxlength="10" placeholder="Unesi telefon:" name="tel1" value="" required&gt;
              &lt;/div&gt;
              &lt;?php 
  
                      $pathTo_file = "/xampp/htdocs/www/knjigovodstvo/install/config.ini";
                      $myfile = fopen($pathTo_file, "r+") or die("Unable to open file!");
                      $tekst = fread($myfile,filesize($pathTo_file));
                      fclose($myfile);
  
                      $arr = explode(",",$tekst);
  
                      $servername = $arr[0];
                      $username = $arr[1];
                      $password = $arr[2];
                      $dbname = $arr[3];
  
                      $kon = new SimpleDB($servername, $username, $password, $dbname); 
                      $sql="SELECT id,kategorija FROM tel_kategorija"; 
                      $result = $kon-&gt;execute($sql);
  
  
                      if ($result-&gt;num_rows &gt; 0) {
                          // output data of each row
                          echo "&lt;div class='form-group col-sm-3'&gt;&lt;label for='sel4'&gt;Kategorija&lt;/label&gt;&lt;select id='sel1' class='form-control' name='sel1'&gt;";
                          echo "&lt;option value=''&gt;"."&lt;/option&gt;";
                          while($row = $result-&gt;fetch_assoc()) {
                          echo "&lt;option value='".$row['id']."'&gt;".$row['kategorija']."&lt;/option&gt;";
                          }
                      } 
                      echo "&lt;/select&gt;&lt;/div&gt;";
  
              ?&gt;
              &lt;div class="form-group col-sm-3"&gt;
                  &lt;label for="jmbg"&gt;JMBG:&lt;/label&gt;
                  &lt;input type="number" class="form-control" id="jmbg1" maxlength="14" placeholder="Unesi jmbg:" name="jmbg1" value="" required&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row form-group"&gt;
  
              &lt;div class="dropdown col-sm-3"&gt;
                  &lt;button type="button" id="btn2" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
                      &lt;span&gt;Moduli&lt;/span&gt;
                      &lt;span class="caret" id="caret1"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;ul id="comp" class="dropdown-menu"&gt;
                    &lt;li&gt;&lt;a class="dropdown-item"&gt;&lt;input type="checkbox" class="form-check-input" name="adminmodul" id="adminmodul" value="x"&gt; Admin modul&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a class="dropdown-item"&gt;&lt;input type="checkbox" class="form-check-input" name="ksluzba" id="ksluzba" value="x"&gt; Kadrovska služba&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a class="dropdown-item"&gt;&lt;input type="checkbox" class="form-check-input" name="esalter" id="esalter" value="x"&gt; E-šalter&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a class="dropdown-item"&gt;&lt;input type="checkbox" class="form-check-input" name="evidencijaio" id="evidencijaio" value="x"&gt; Evidencija ulaza/izlaza&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a class="dropdown-item"&gt;&lt;input type="checkbox" class="form-check-input" name="mposlovanje" id="mposlovanje" value="x"&gt; Materijalno poslovanje&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a class="dropdown-item"&gt;&lt;input type="checkbox" class="form-check-input" name="emagacin" id="emagacin" value="x"&gt; E-magacin&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a class="dropdown-item"&gt;&lt;input type="checkbox" class="form-check-input" name="blagajna" id="blagajna" value="x"&gt; Blagajna&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a class="dropdown-item"&gt;&lt;input type="checkbox" class="form-check-input" name="mehanizacija" id="mehanizacija" value="x"&gt; Mehanizacija&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a class="dropdown-item"&gt;&lt;input type="checkbox" class="form-check-input" name="ekancelarija" id="ekancelarija" value="x"&gt; E-kancelarija&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;button type="button" id="submit" style="margin-top: 10px" name="submit" class="btn btn-default" data-dismiss="modal" onclick="serialization('adminV2.php',this)"&gt;Izmeni&lt;/button&gt;   
      &lt;/form&gt; 
  &lt;/div&gt;  
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;  
            &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS: 
  First arguments of JS function is pathToFilename+filename.php, second is keyword 'this'.</p>
  
  <pre><code>function serialization(phpdoc,me){
  
      var FormId = me.form.id;
  
      var name = "";
      var val = "";
      var str = phpdoc+"?";
      var i = 0;
  
      var net = document.getElementById(FormId).querySelectorAll("#"+FormId+" [name]");
      var len = document.getElementById(FormId).length-1;
  
      while(i&lt;len) {
  
          /*if(net[i].type=="checkbox" &amp;&amp; net[i].checked===true){
              name = net[i].getAttribute("name");
              net[i].value = "x";
              val = net[i].value; 
          }
  
          if(net[i].type=="checkbox" &amp;&amp; net[i].checked===false){
              name = net[i].getAttribute("name");
              net[i].value = "";
              val = net[i].value; 
          }
  
          if(net[i].type!="checkbox" &amp;&amp; net[i].type!="button"){
              name = net[i].getAttribute("name");
              val = net[i].value;
          }*/
  
          name = net[i].name;
          val = net[i].value;
  
          i++;
          str += name+"="+val;
  
          if(i&lt;len){
              str += "&amp;";
          }
  
      }
  
      str = encodeURI(str);
      alert(str);
      str1 = str;
  
      var xhttp = new XMLHttpRequest();
  
      xhttp.onreadystatechange = function() {
  
          if((document.getElementById("raport")!=undefined || document.getElementById("raport")!=null) &amp;&amp; this.readyState == 4 &amp;&amp; this.status == 200){
              document.getElementById("raport").innerHTML = this.responseText;
          }
  
      };
  
      xhttp.open("GET", str, false);      
      xhttp.send();
      //alert(str);
  }
  </code></pre>
  
  <p>You can also see that i've tried checking if button is checked, but besides if this is true or not it value returned is always 'undefined'. PS: Variable str1 is global variable of which is not a concern in this case.</p>
  
  <p>EDIT: This is how it looks for me
  <a href="https://i.stack.imgur.com/XRDjS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XRDjS.jpg" alt="This is how it looks for me"></a></p>
  
  <p>EDIT No.2:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    function serialization(phpdoc,me){
  
      var FormId = me.form.id;
  
      var name = "";
      var val = "";
      var str = phpdoc+"?";
      var i = 0;
  
      var net = me.form.querySelectorAll("#"+FormId+" [name]");
      var len = net.length;   
      while(i&lt;len) {
  
          if(net[i].type=="checkbox" &amp;&amp; net[i].checked===true){
              name = net[i].name;
              val = net[i].value; 
          }
  
          if(net[i].type=="checkbox" &amp;&amp; net[i].checked===false){
              name = net[i].getAttribute("name");
              net[i].value = "";
              val = net[i].value; 
          }
  
          if(net[i].type!="checkbox" &amp;&amp; net[i].type!="button"){
              name = net[i].getAttribute("name");
              val = net[i].value;
          }
  
          i++;
          str += name+"="+val;
  
          if(i&lt;len){
              str += "&amp;";
          }
  
      }
      alert(str);
      str = encodeURI(str);
  
      str1 = str;
  
      var xhttp = new XMLHttpRequest();
  
      xhttp.onreadystatechange = function() {
  
          if((document.getElementById("raport")!=undefined || document.getElementById("raport")!=null) &amp;&amp; this.readyState == 4 &amp;&amp; this.status == 200){
              document.getElementById("raport").innerHTML = this.responseText;
          }
  
      };
  
      xhttp.open("GET", str, false);  
      xhttp.send();
  
  }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
    &lt;h2&gt;Modal Example&lt;/h2&gt;
    &lt;!-- Trigger the modal with a button --&gt;
    &lt;button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"&gt;Open Modal&lt;/button&gt;
  
    &lt;!-- Modal --&gt;
    &lt;div class="modal fade" id="myModal" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
  
        &lt;!-- Modal content--&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
            &lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
          &lt;form id="iha"&gt;
          Text&lt;input type="text" value="" name="ggg1"&gt;&lt;/br&gt;
          Number&lt;input type="number" value="" name="ggg2"&gt;&lt;/br&gt;
          blah3&lt;input type="checkbox" value="ttt3" name="ggg3"&gt;&lt;/br&gt;
          blah4&lt;input type="checkbox" value="ttt4" name="ggg4"&gt;&lt;/br&gt;
          blah5&lt;input type="checkbox" value="ttt5" name="ggg5"&gt;&lt;/br&gt;
          &lt;button type="submit" onclick="serialization('izvestaj.php',this)"&gt;klik&lt;/button&gt;
          &lt;/form&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>EDIT No.3(JS): </p>
  
  <pre><code>    function serialization(phpdoc,me){
  
      var FormId = me.form.id;
  
      var name = "";
      var val = "";
      var str = phpdoc+"?";
      var i = 0;
  
      var net = me.form.querySelectorAll("#"+FormId+" [name]");
      var len = net.length;   
      while(i&lt;len) {
  
          if(net[i].type=="checkbox" &amp;&amp; net[i].checked===true){
              name = net[i].name;
              val = net[i].value; 
          }
  
          if(net[i].type=="checkbox" &amp;&amp; net[i].checked===false){
              name = net[i].getAttribute("name");
              net[i].value = "";
              val = net[i].value; 
          }
  
          if(net[i].type!="checkbox" &amp;&amp; net[i].type!="button"){
              name = net[i].getAttribute("name");
              val = net[i].value;
          }
  
          i++;
          str += name+"="+val;
  
          if(i&lt;len){
              str += "&amp;";
          }
  
      }
      alert(str);
      str = encodeURI(str);
  
      str1 = str;
  
      var xhttp = new XMLHttpRequest();
  
      xhttp.onreadystatechange = function() {
  
          if((document.getElementById("raport")!=undefined || document.getElementById("raport")!=null) &amp;&amp; this.readyState == 4 &amp;&amp; this.status == 200){
              document.getElementById("raport").innerHTML = this.responseText;
          }
  
      };
  
      xhttp.open("GET", str, false);  
      xhttp.send();
  
  }
  </code></pre>
  
  <p>With this js code works.</p>