How do I update input values with db values after a select OnChange with idealforms?

Question

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.

I looked through stackoverflow and saw it was a fairly common problem but I still can't seem to work it out. I used this and it didn't work, maybe because I placed it in the wrong order?

This is my code:

    <form id="my-form" action="EditAccountHandler.php" method="post">

        <?php
        include 'conn/dbConnect.php';

        echo '<div><label>Gebruikers</label><select id="gebruiker" selected="$sUsername" name="selectedUser" onchange="updateInput(this.value)">';

$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 "<option value='$iIdUser'>$sUsername</option>";
                }

        echo "</select></div>";
        ?>
        <script>
        function updateInput(<?= json_encode($sFirstname); ?>)
        {
        document.getElementById("naam").value = <?php echo json_encode($sFirstname); ?>;
        }
        </script>
                    <div><label>Voornaam</label><input id="naam" name="naam" type="text"/></div>
                   <div><label>Achternaam</label><input id="anaam" name="anaam" type="text"/></div>
              <div>     
                <button id="reset" type="button">Reset</button>
                <button type="submit">Wijzigen</button>
              </div>
            </form>

This is what I'm trying to achieve: Example picture

I'm not sure about what I am doing wrong. Can yo guys help me?

Edit
Removed code that was double in comparison with the first codesnippet.
Added echo
Removed action="EditAccountHandler.php"
Added idealforms validation code Replaced with final code

<div id="main">

                <h3>Wijzig Account</h3><br />
                <form id="myselect" action="" method="post">
                <div>
                <label>Gebruikers</label><select id="gebruiker" selected="$sUsername" name="selectedUser" onchange="this.form.submit()">
                <?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 "<option value='$iIdUser'>$sUsername</option>";
                    }
                ?>
                </select>
                </div>
                </form>

                <script>
                var options = { onFail: function(){alert('Selecteer een persoon')}};
                var $myform1 = $('#myselect').idealforms(options).data('idealforms');
                $myform1.focusFirst();
                </script>   

                <?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'];
                        }
                ?>

                    <form id="my-form" action="EditAccountHandler.php" method="post">
                    <div><label>Voornaam</label><input id="naam" name="naam" value="<?php echo htmlspecialchars($sFname); ?>" type="text"/></div>
                    <div><label>Achternaam</label><input id="anaam" name="anaam" value="<?php echo htmlspecialchars($sLname); ?>" type="text"/></div>
                    <div>
                        <label>Rechten</label>
                        <label><input type="radio" name="rechten" value="Administrator"/>Administrator</label>
                        <label><input type="radio" name="rechten" value="Contentmanager"/>Contentmanager</label>
                        <label><input type="radio" name="rechten" value="Administratie"/>Administratie</label>
                        <label><input type="radio" name="rechten" value="Medewerker"/>Medewerker</label>
                        <label><input type="radio" name="rechten" value="Klant" checked/>Klant</label>
                        <label><input type="radio" name="rechten" value="Gast"/>Gast</label>
                        <label><input type="radio" name="rechten" value="MedeKlant"/>MedeKlant</label>
                    </div>
                    <div>   
                        <button id="reset" type="button">Reset</button>
                        <button type="submit">Wijzigen</button>
                    </div>
                </form>
            </div>
        </div>
<script>

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();
</script>
<?php
}
?>

Answer 1

I think you are messing client code with server code.

Once the onChange event is fired, you have to reload the page for example onChange="this.form.submit()" and you verify if(!empty($_POST["selectedUser"])) then you fill the fields of the form with the data you can obtain with a new SQL query, where id = $_POST["selectedUser"].

In this case you don't need the updateuser function.

If you use AJAX, you would need the updateuser function, but you have got to get rid of the json_encode methods which execute on server, and with ajax everything is in the client part. It would be simply: "function updateuser(id)".

You can use jquery to do the ajax call to get the info, and then you fill the form fields.

EDIT:

Examining the new code you provide. I see one error, you are using htmlspecialchars function but you are not echoing it, ;-). You should use "echo ...".

For the form, you should use "this.form.submit()" if you are inside the form labels. If you use jquery it would be something like this:

<script type="text/javascript">

$("#selectedUser").change(function()
{
    if(this.form.elements['selectedUser'].value!="")
    {
        this.form.submit();
    }
});
</script>