title: jQuery POST form that is viewed with Ajax
body: <p>Ok, this is my first time logged in, but have a question which I can`t find. Maybe I used the wrong search terms or it is my broken English.
  But hopefully, somebody can point me in the right direction.</p>
  
  <p>My situation. I have a list of users. When I click on one of them a second screen opens using javascript/AJAX. Some CSS styling does the split screen thing.</p>
  
  <p>In the second screen, I show a form with some info or not. So far so good.
  What I want is that when you change some info and you press the submit/save button, data gets saved in the database without a page refresh. But I can't get it right. When I press the button the ajax split-screen disappears. But the page that I linked on the jquery does nothing.</p>
  
  <p>Some code is in Dutch so ask if you need translation.</p>
  
  <p>My code is as follows:
  Page users.php</p>
  
  <pre><code>&lt;script&gt;
    function jsAjaxVieuwUser(str) {
  
      if (str == "") {
        document.getElementById("mainRight").innerHTML = "";
        return;
      } else {
        if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp = new XMLHttpRequest();
        } else {
          // code for IE6, IE5
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
            document.getElementById("mainRight").innerHTML = xmlhttp.responseText;
          }
        };
        xmlhttp.open("GET", "ajaxBeheer.php?VieuwUser=" + str, true);
        xmlhttp.send();
  
        document.getElementById("mainRight").style = "display: inline-block;"; // Don`t show the start table
        document.getElementById("closeUser").style = "display: block;"; // Don`t show the start table
      }
    }
  &lt;/script&gt;
  
  &lt;div class="main"&gt;
      &lt;div class="mainInfo"&gt;
          &lt;h3&gt;Gebruikers&lt;/h3&gt;
      &lt;/div&gt;
  
      &lt;div class="mainContent"&gt;
  
          &lt;div class="mainLeft" id="mainLeft"&gt;
              &lt;div class="actionBar"&gt;
                  &lt;div&gt;&lt;a href="newuser.php"&gt;&lt;button class="button button2"&gt;Nieuwe gebruiker&lt;/button&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;div id="closeUser"&gt;&lt;a href="#" onClick="closeUserVieuw()"&gt;&lt;button class="button button2"&gt; &amp;#60;&amp;#60; &lt;/button&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="list" id="userList"&gt;
                  &lt;ul&gt;
                      &lt;li class="listheader"&gt;&lt;div class="listFirstColum"&gt;Naam gebruiker&lt;/div&gt; &lt;div class="listSecondColum"&gt;Laatste login&lt;/div&gt;&lt;/li&gt;
      &lt;?php
                      if(!isset($_GET['limit'])){
                          //     START, AANTAL
                          $limit = '0 , 10';
                      }
                      $result = $db-&gt;select("SELECT ID, user_name, user_last_login FROM users ORDER BY ID ASC LIMIT ".$limit." ",array(''),array(''));
  
                      while ($row = $result-&gt;fetch_assoc()) {
                          echo '&lt;a href="#" onClick="jsAjaxVieuwUser('.$row['ID'].')"&gt;&lt;li&gt; &lt;div class="listFirstColum"&gt;'.$row['user_name'].'&lt;/div&gt; &lt;div class="listSecondColum"&gt;'.$row['user_last_login'].'&lt;/div&gt; &lt;/li&gt;&lt;/a&gt;';
                      }
  
      ?&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="mainRight" id="mainRight"&gt;
              &lt;h1&gt;HALLO&lt;/h1&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Page ajaxBeheer.php</p>
  
  <pre><code>if(isset($_GET['VieuwUser'])){
  
      $disabled = 'disabled';
      $idUser = $_GET['VieuwUser'];
  
      $result = $db-&gt;select(" SELECT  users.ID, 
                                      users.user_name, 
                                      users.user_email, 
                                      userinfo.userid, 
                                      userinfo.user_firstname, 
                                      userinfo.user_lastname, 
                                      userinfo.user_birthday, 
                                      userinfo.user_adress, 
                                      userinfo.user_adressnr
  
                              FROM users INNER JOIN userinfo 
                              ON userinfo.userid = users.ID 
                              WHERE users.ID=? ", array($idUser),array('%i'));
  
      while ($row = $result-&gt;fetch_assoc()) {
      //Gebruikers gegevens   
          $username = $row['user_name'];
          $user_email = $row['user_email'];
  
      //Personal data
          $user_firstname = $row['user_firstname'];
          $user_lastname = $row['user_lastname'];
          $user_birthday = $row['user_birthday'];
          $user_adress = $row['user_adress'];
          $user_adressnr = $row['user_adressnr'];
  
      }
  
      // make the date readable, but if its empty make it 0000
      if ($user_birthday == '0000-00-00' || empty($user_birthday)) {
          $user_birthday = ' ';
      }else{
          $date = DateTime::createFromFormat('Y-m-d', $user_birthday);
          $user_birthday = $date-&gt;format('d-m-Y');
      }
  
          ?&gt;
          &lt;div class="contentHolder" style="width: 100%;"&gt;
                  &lt;div class="header"&gt;
                      &lt;h3 style="width: 100%; text-align: center;"&gt;Gegevens medewerker: &lt;?= $username ?&gt;&lt;/h3&gt;
                  &lt;/div&gt;
  
                  &lt;div class="prLeftColomn colomn"&gt;
                      &lt;form name="gebruiker" id="formId" method="POST"&gt;
                          &lt;p&gt;&lt;div class="omschrijving"&gt;Voornaam&lt;/div&gt;&lt;div class="waarde"&gt;&lt;input type="text" name="firstname" value="&lt;?= $user_firstname ?&gt;" /&gt;&lt;/div&gt;&lt;/p&gt;
                          &lt;p&gt;&lt;div class="omschrijving"&gt;Achternaam&lt;/div&gt;&lt;div class="waarde"&gt;&lt;input type="text" name="firstname" value="&lt;?= $user_lastname ?&gt;" /&gt;&lt;/div&gt;&lt;/p&gt;
                          &lt;p&gt;&lt;div class="omschrijving"&gt;Email&lt;/div&gt;&lt;div class="waarde"&gt;&lt;input type="text" name="firstname" value="&lt;?= $user_email ?&gt;" /&gt;&lt;/div&gt;&lt;/p&gt;
                          &lt;p&gt;&lt;div class="omschrijving"&gt;Geboorte datum&lt;/div&gt;&lt;div class="waarde"&gt;&lt;input type="text" name="firstname" value="&lt;?= $user_birthday ?&gt;" /&gt;&lt;/div&gt;&lt;/p&gt;
                          &lt;p&gt;&lt;div class="omschrijving"&gt;Telefoon&lt;/div&gt;&lt;div class="waarde"&gt;&lt;input type="text" name="firstname" value="" /&gt;&lt;/div&gt;&lt;/p&gt;
  
                          &lt;p&gt;&lt;div class="omschrijving"&gt;Adres + huisnummer&lt;/div&gt;&lt;div class="waarde"&gt;&amp;nbsp;&lt;?= $user_adress.'&amp;nbsp;'.$user_adressnr ?&gt;&lt;/div&gt;&lt;/p&gt;
                          &lt;p&gt;&lt;div class="omschrijving"&gt;Postcode&lt;/div&gt;&lt;div class="waarde"&gt;&amp;nbsp;&lt;/div&gt;&lt;/p&gt;
                          &lt;p&gt;&lt;div class="omschrijving"&gt;Plaats&lt;/div&gt;&lt;div class="waarde"&gt;&amp;nbsp;&lt;/div&gt;&lt;/p&gt;
                          &lt;p&gt;&lt;div&gt;&lt;input class="button" type="submit" name="updateGebruiker" value="UPDATE" onclick="save()"/&gt;&lt;/div&gt;&lt;/p&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;              
  
  &lt;style type="javascript"&gt;
  function save(){
          var query = $('#formId').serialize();
          var url = 'updateUser.php';
          $.post(url, query, function (response) {
           alert (response);
          });
  
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>page updateUser.php</p>
  
  <pre><code>&lt;?php
  
      $table = 'userinfo';
      $data = array('user_firstname' =&gt; 'test'); 
      $format = array('%s');
      $where = array('id' =&gt; '3');
      $where_format = array('%i');
      $updateCalc = $db-&gt;update($table, $data, $format, $where, $where_format);
  ?&gt;
  </code></pre>