我正在使用来自 elclanrs 的理想形式,并且我有一个从数据库中填充的选择。OnChange 我想用数据库中的信息更新输入字段的值。在这种情况下,名字,姓氏。我用 AJAX 尝试过,但没有成功,因为当表单值更新时,表单的整个理想形式构成消失了。
我查看了stackoverflow,发现这是一个相当普遍的问题,但我似乎仍然无法解决。我用了这个,它不起作用,也许是因为我把它放在了错误的顺序?
这是我的代码:
<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>
这就是我想要实现的目标: 示例图片
我不确定我做错了什么。你们能帮帮我吗?
编辑
删除了与第一个代码片段相比翻倍的代码。
添加了 echo
删除了 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
}
?>