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

时间:2013-03-27 10:38:39

标签: php jquery forms select input

我正在使用来自elclanrs的idealforms,我有一个从数据库中填充的select。 OnChange我想用数据库中的信息更新输入字段的值。在这种情况下,firstname,lastname。我尝试使用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

我不确定我做错了什么。哟伙计们可以帮助我吗?

修改
删除了与第一个代码片段相比加倍的代码 增加了回音
删除了action =“EditAccountHandler.php”
添加了idealforms验证码 替换为最终代码

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

1 个答案:

答案 0 :(得分:1)

我认为您正在使用服务器代码搞乱客户端代码。

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

在这种情况下,您不需要updateuser函数。

如果你使用AJAX,你需要updateuser函数,但你必须摆脱在服务器上执行的json_encode方法,并且ajax一切都在客户端部分。它很简单:“function updateuser(id)”。

您可以使用jquery进行ajax调用以获取信息,然后填写表单字段。

编辑:

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

对于表单,如果您在表单标签内,则应使用“this.form.submit()”。 如果你使用jquery,它将是这样的:

<script type="text/javascript">

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