How can I load data to a form using javascript?

Question

I want to load data from MySql database to a HTTP form When I type the in the text it should load the name of the person

<html>
<head>
    <script type="text/javascript">
    function FetchUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    var data = JSON.parse(xmlhttp.responseText);
  }
  }
xmlhttp.open("GET","finduser.php?q="+str,true);
xmlhttp.send();
}
this.form.name.value=data.name;
this.form.age.value=data.age;
</script>
</head>
<body>
<form method="post" >
Id<input type="text"  name="id" size="5" />    </br>
Name<input type="text" id="name" name="name"  onclick="Fetchuser(this.form.id.value)" ></br>
Age<input type="text" id="age" name="" size="2" /></br>
</form>
</body>
</html>

The PHP code for that.

<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', '125');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("test", $con);

$sql="SELECT * FROM wow WHERE id = '".$q."'";
$resul = json_encode(mysql_query($sql));
echo $resul;
?>

My question is how can I get both, name and age, to the text boxes. i tried this but still i cant load data

Don't forget to echo the output of your php code so you can expect a non-empty responseText — Dexter Huinda
– Dexter Huinda, Commented Jun 27, 2012 at 12:49

Dexter Huinda · Accepted Answer · 2012-06-27 15:54:37Z

2

You can use json_encode to return a json with all your relevant fields, and in javascript put each field where it belongs.

$result = json_encode(mysql_query($sql));
echo $result; // don't forget to push the output or responseText is null.

And in the javascript:

var data = JSON.parse(xmlhttp.responseText);

Then you access your data with data.name_of_the_field

edited Jun 27, 2012 at 15:54

Dexter Huinda

1,2221 gold badge7 silver badges9 bronze badges

answered Jun 27, 2012 at 11:52

iwiznia

1,67914 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dexter Huinda Over a year ago

+1 for suggesting the right way to pass and parse data easily.

iwiznia Over a year ago

Thanks Dexter for pointing out the missing echo. The solution should work in you own example. Just check that the "data" variable has the correct values in javascript.

Vinoth Kumar · Accepted Answer · 2012-06-27 12:05:50Z

1

 <?php
 $rs=mysql_fetch_object($result );
 $name=$rs->name;
 $age=$rs->age;
 ?>
  Name<input type="text" name="name"  value="<?php echo $name;?>" />
  Age<input type="text" name="" size="2" value="<?php echo $age;?>"  />

answered Jun 27, 2012 at 12:05

Vinoth Kumar

931 gold badge1 silver badge8 bronze badges

2 Comments

Dexter Huinda Over a year ago

I think he wanted an auto suggest feature, so basically an ajax request is a must, and not this solution.

Dexter Huinda Over a year ago

@Wh1T3h4Ck5 i think he wanted an auto suggest feature.

Dexter Huinda · Accepted Answer · 2012-06-27 11:57:17Z

0

put an id like <input id="name", <input id="age" in your text boxes, so you can assign them via the document.getElementById("name"), document.getElementById("age")

answered Jun 27, 2012 at 11:57

Dexter Huinda

1,2221 gold badge7 silver badges9 bronze badges

Collectives™ on Stack Overflow

How can I load data to a form using javascript?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related