Hi I am developing an online admission website for my project....I hv a table in php page with 2 columns(student id, student name)...when some1 clicks on any row, then the detail information of that student should be retrieved from mysql table n result should be displayed in the form of table....I am not getting such code from anywhere.....how can i do this with help of javascript? how to embed javascript in php?....Plz can any1 help me as soon as possible?.
kiransadani 0 Newbie Poster
kiransadani 0 Newbie Poster
here is the html code where student's id and name wil be stored in table:
<html>
<head>
<title>Branch 1</title>
<script language="javascript">
<!--
function sub1(i)
{
if(i=1)
document.f4.action="add.php";
if(i=2)
document.f4.action="delete.php";
document.f4.submit();
}
//-->
</script>
</head>
<body BGCOLOR="black">
<br>
<font size="16" color="red"> <b>Branch 1</b> </font>
      
<a href="b1_edit.html"> View Branch Details </a>
<table cellpadding="4" border="0" align="right">
<tr>
<td>
<font color="red"><b> View Course-wise </b></font>
</td>
</tr>
<tr>
<td>
<select name="course-wise">
<option value="c1" selected>All
<option value="c2">Diploma in 3-D Animation
<option value="c3">Diploma in 2-D Animation
<option value="c4">Web Designing
</select>
</td></tr>
</table>
<br> <br>
<table align="left" border="1" cellpadding=4 width="70%" rules="all">
<caption align="center" <font color="red" size="6"> <b>Student Details</b> </font></caption>
<tr>
<th width="30%"><font color="red"> <b>Student Id </b> </font> </th>
<th width="80%"><font color="red"> <b>Student Name </b> </font> </th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr align="right">
<td colspan="2">
<form name="f4">
<input type="submit" value="Add" name="add_b1" onClick="sub1(1)">
<input type="submit" value="Delete" name="del_b1" onClick="sub1(2)">
</form>
</td>
</tr>
</table>
</body>
</html>This is the php page for selecting
<?php
$con = mysql_connect("localhost","username","passwd");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("admission", $con);
$result = mysql_query("SELECT * FROM student");
echo "<table border='1'>
<tr>
<th>id</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
<th>age</th>
<th>Course</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['firstName'] . "</td>";
echo "<td>" . $row['lastName'] . "</td>";
echo "<td>" . $row['gender'] . "</td>";
echo "<td>" . $row['age'] . "</td>";
echo "<td>" . $row['course'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>How can the row click event in the 1st html page direct me to this php page so that i can select records through mysql????????
Krstevski 7 Junior Poster
You can use Ajax to get all informations of the student
var xmlhttp
function showDetails(str)
{
if (str.length==0)
{
document.getElementById("results").innerHTML="";
return;
}
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
var url="getResults.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("results").innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}getResults.php
$q = $_GET["q"]; // q = id of the student
// mysql connection and query
// $results = mysql_query("select * from tableName where id = $q");
// display the $resultsindex.php
<html>
<head>
<!-- Call ajax.js -->
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<!-- Body -->
<!-- Table with the ID and Student -->
<table>
<!-- onClick="Call js function to get the information" -->
<tr id="IdOfTheStudent" onClick="showDetails(this.id)">
<td>
<!-- Student ID -->
</td>
<td>
<!-- Student Name -->
</td>
</tr>
</table>
<div id="results">
<!-- Here would be displayed the results when you click on the row -->
</div>
</body>
</html>If you not worked with the ajax, read more about ajax on w3school.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.