title: How do I update input values with db values after a select OnChange with idealforms?
body: <p>I'm using idealforms from elclanrs and I have a select which is filled from a database. OnChange I want to update the value of the input fields with information from the database. In this case, firstname, lastname. I tried it with AJAX but that didn't work out because when the form values where getting renewed, the whole idealforms makeup of the form vanishes.</p>
  
  <p>I looked through stackoverflow and saw it was a fairly common problem but I still can't seem to work it out. I used <a href="https://stackoverflow.com/questions/5457739/change-value-of-input-onchange">this</a> and it didn't work, maybe because I placed it in the wrong order? </p>
  
  <p>This is my code:</p>
  
  <pre><code>    &lt;form id="my-form" action="EditAccountHandler.php" method="post"&gt;
  
          &lt;?php
          include 'conn/dbConnect.php';
  
          echo '&lt;div&gt;&lt;label&gt;Gebruikers&lt;/label&gt;&lt;select id="gebruiker" selected="$sUsername" name="selectedUser" onchange="updateInput(this.value)"&gt;';
  
  $sqEditUser = mysql_query("SELECT * FROM account a, persoon p WHERE a.idSuper = p.idUser", $con);
  
          while($row = mysql_fetch_array($sqEditUser))
                  {
                       $iIdUser = $row['idUser'];
                       $sFirstname = $row['Voornaam'];
                       $sLastname = $row['Achternaam'];
                       $sUsername = "{$sLastname}, {$sFirstname}";
  
                       echo "&lt;option value='$iIdUser'&gt;$sUsername&lt;/option&gt;";
                  }
  
          echo "&lt;/select&gt;&lt;/div&gt;";
          ?&gt;
          &lt;script&gt;
          function updateInput(&lt;?= json_encode($sFirstname); ?&gt;)
          {
          document.getElementById("naam").value = &lt;?php echo json_encode($sFirstname); ?&gt;;
          }
          &lt;/script&gt;
                      &lt;div&gt;&lt;label&gt;Voornaam&lt;/label&gt;&lt;input id="naam" name="naam" type="text"/&gt;&lt;/div&gt;
                     &lt;div&gt;&lt;label&gt;Achternaam&lt;/label&gt;&lt;input id="anaam" name="anaam" type="text"/&gt;&lt;/div&gt;
                &lt;div&gt;     
                  &lt;button id="reset" type="button"&gt;Reset&lt;/button&gt;
                  &lt;button type="submit"&gt;Wijzigen&lt;/button&gt;
                &lt;/div&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p>This is what I'm trying to achieve:
  <a href="http://tinypic.com/r/33z92k7/6" rel="nofollow noreferrer">Example picture</a></p>
  
  <p>I'm not sure about what I am doing wrong. Can yo guys help me?</p>
  
  <p><strong>Edit</strong><br>
  Removed code that was double in comparison with the first codesnippet.<br>
  Added echo<br>
  Removed action="EditAccountHandler.php"<br>
  Added idealforms validation code
  Replaced with final code  </p>
  
  <pre><code>&lt;div id="main"&gt;
  
                  &lt;h3&gt;Wijzig Account&lt;/h3&gt;&lt;br /&gt;
                  &lt;form id="myselect" action="" method="post"&gt;
                  &lt;div&gt;
                  &lt;label&gt;Gebruikers&lt;/label&gt;&lt;select id="gebruiker" selected="$sUsername" name="selectedUser" onchange="this.form.submit()"&gt;
                  &lt;?php
                  include 'conn/dbConnect.php';
  
                  $sqUser = mysql_query("SELECT * FROM account a, persoon p WHERE a.idSuper = p.idUser", $con);
  
                      while($row = mysql_fetch_array($sqUser))
                      {
                           $iIdUser = $row['idUser'];
                           $sFirstname = $row['Voornaam'];
                           $sLastname = $row['Achternaam'];
                           $sUsername = "{$sLastname}, {$sFirstname}";
  
                           echo "&lt;option value='$iIdUser'&gt;$sUsername&lt;/option&gt;";
                      }
                  ?&gt;
                  &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;/form&gt;
  
                  &lt;script&gt;
                  var options = { onFail: function(){alert('Selecteer een persoon')}};
                  var $myform1 = $('#myselect').idealforms(options).data('idealforms');
                  $myform1.focusFirst();
                  &lt;/script&gt;   
  
                  &lt;?php
                      if(!empty($_POST['selectedUser']))
                      {
                          $sqGetUser = mysql_query("SELECT * FROM persoon WHERE idUser = '$_POST[selectedUser]'", $con);      
                          while($row = mysql_fetch_array($sqGetUser))
                          {
                               $sFname = $row['Voornaam'];
                               $sLname = $row['Achternaam'];
                          }
                  ?&gt;
  
                      &lt;form id="my-form" action="EditAccountHandler.php" method="post"&gt;
                      &lt;div&gt;&lt;label&gt;Voornaam&lt;/label&gt;&lt;input id="naam" name="naam" value="&lt;?php echo htmlspecialchars($sFname); ?&gt;" type="text"/&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;label&gt;Achternaam&lt;/label&gt;&lt;input id="anaam" name="anaam" value="&lt;?php echo htmlspecialchars($sLname); ?&gt;" type="text"/&gt;&lt;/div&gt;
                      &lt;div&gt;
                          &lt;label&gt;Rechten&lt;/label&gt;
                          &lt;label&gt;&lt;input type="radio" name="rechten" value="Administrator"/&gt;Administrator&lt;/label&gt;
                          &lt;label&gt;&lt;input type="radio" name="rechten" value="Contentmanager"/&gt;Contentmanager&lt;/label&gt;
                          &lt;label&gt;&lt;input type="radio" name="rechten" value="Administratie"/&gt;Administratie&lt;/label&gt;
                          &lt;label&gt;&lt;input type="radio" name="rechten" value="Medewerker"/&gt;Medewerker&lt;/label&gt;
                          &lt;label&gt;&lt;input type="radio" name="rechten" value="Klant" checked/&gt;Klant&lt;/label&gt;
                          &lt;label&gt;&lt;input type="radio" name="rechten" value="Gast"/&gt;Gast&lt;/label&gt;
                          &lt;label&gt;&lt;input type="radio" name="rechten" value="MedeKlant"/&gt;MedeKlant&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div&gt;   
                          &lt;button id="reset" type="button"&gt;Reset&lt;/button&gt;
                          &lt;button type="submit"&gt;Wijzigen&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;script&gt;
  
  var options = 
  {
      onFail: function() 
      {
        alert( 'Vul alle velden correct in.' )
      },
      inputs: 
      {               
          'anaam': 
          {
          filters: 'required name',
  
          },
  
          'naam': 
          {
          filters: 'required name',
          },
      }
  };
  
   var $myform = $('#my-form').idealforms(options).data('idealforms');
  
    $('#reset').click(function(){ $myform.reset().fresh().focusFirst() });
    $myform.focusFirst();
  &lt;/script&gt;
  &lt;?php
  }
  ?&gt;
  </code></pre>