在使用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>