获取选定的数据并填写文本框

时间:2017-06-06 15:45:34

标签: javascript php jquery

我正在尝试为使用我们内部应用程序的用户制作易于使用的表单。基本上我有一个选择元素。我想要的是当我选择任何我想要填充指定文本框的内容时。

代码如下。这工作正常,但只填充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;
}

2 个答案:

答案 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}}