我正在使用来自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
}
?>
答案 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>