在使用idealforms选择OnChange后，如何使用db值更新输入值？

Question

我使用elclanrs的idealforms，我有一个从数据库中填充的选择。 OnChange我想用数据库中的信息更新输入字段的值。在这种情况下，名字，姓氏。我尝试了AJAX，但没有成功，因为当表单的值更新时，表单的整个理想化妆组件消失了。

我看着通过stackoverflow，看到这是一个相当普遍的问题，但我仍然似乎无法工作。我用this，它没有工作，也许是因为我把它放在错误的顺序？

这是我的代码：

<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> 

这就是我想要实现： Example picture

我不知道什么我做错了。你们可以帮我吗？

编辑
删除了与第一个codenippet相比是双倍的代码。
加法回波
移除行动=“EditAccountHandler.php”与最终代码

<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

我想你搞乱客户端代码与服务器代码替换
增加idealforms验证码 。

一旦onChange事件被触发，你必须重新加载页面，例如onChange =“this.form.submit（）”，然后验证是否（！empty（$ _ POST [“selectedUser”]））使用新的SQL查询获取数据的表单字段，其中id = $ _POST [“selectedUser”]。

在这种情况下，您不需要更新用户功能。

如果您使用AJAX，您需要更新用户功能，但您必须摆脱在服务器上执行的json_encode方法，并且使用ajax，所有内容都位于客户端部分。这将是简单的：“功能更新用户（ID）”。

你可以使用jQuery来做ajax调用来获取信息，然后填写表单域。

编辑：

检查您提供的新代码。我看到一个错误，你正在使用htmlspecialchars函数，但你没有回应它，;-)。你应该使用“回声...”。

对于表单，如果您位于表单标签内，则应该使用“this.form.submit（）”。 如果你使用jquery它会是这样的：

<script type="text/javascript"> 

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