我正在尝试为使用我们内部应用程序的用户制作易于使用的表单。基本上我有一个选择元素。我想要的是当我选择任何我想要填充指定文本框的内容时。
代码如下。这工作正常,但只填充1盒。请不要忘记我正在从mySQL数据库中获取数据。
html文件:
<script src="choose.js"></script>
<select onchange="ChooseGuest(this.value)">
<option value="1">guest 1</option>
<option value="2">guest 2</option>
<option value="3">guest 3</option>
</select>
<input type="text" id="guestdetails"/>
<input type="text" id="guestdetails2"/>
php数据文件:
$AskForIt = $_GET["q"];
If ($AskForIt == "1") {
echo "guest 1 data";
} Elseif ($AskForIt == "2") {
echo "guest 2 data";
} Elseif ($AskForIt == "3") {
echo "guest 3 data";
}
js文件:
var xmlHttp
function ChooseGuest(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("upgrade your browser");
return;
}
var url="guests.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("guestdetails").value=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
答案 0 :(得分:0)
根据我的理解,您正在尝试使用从数据库中提取的数据填充输入框,并根据选择的下拉列表显示相应的数据。 PHP只是服务器端。一旦页面加载,PHP将只运行一次,而不是再次运行,直到重新加载页面。因此,您需要使用JS访问这些变量。这可能就是为什么只填写第一个选项。
如果是这样,您将需要进入PHP文件并创建与从数据库访问的数据相同的JS变量。只需将您的JS变量设置为等于来自PHP的变量的PHP回声:
PHP数据文件
<?php
var somePHPvar = "DB Value";
?>
<script>
var someVar = <?php echo somePHPvar; ?>;
</script>
如果这一切都在同一个PHP文件上完成,请不要忘记将它包含在页面上并调用这些JS变量。从那里你可以使用JS填充这些值。
答案 1 :(得分:0)
这是一种只使用jQuery即可实现此目的的方法。
示例:https://jsfiddle.net/Twisty/u2gqwfL4/
<强>的JavaScript 强>
function ChooseGuest(v, str) {
$.get("guests.php", {
q: str,
sid: Math.random()
}, function(results) {
console.log(results, v);
$("#guestdetails" + v).val(results);
});
}
由于jsfiddle的性质和exampled的制作方式,你的代码会有所不同。我建议:
{{1}}