calling javascript function with row click

Question

kiransadani 0 Newbie Poster

13 Years Ago

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?.

php

2 Contributors
2 Replies
1K Views
7 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by Krstevski

All 2 Replies

Krstevski 7 Junior Poster

13 Years Ago

You can use Ajax to get all informations of the student

ajax.js

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 $results

index.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.

Edited 13 Years Ago by Krstevski because: n/a

Reply to this topic

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.

kiransadani 0 Newbie Poster · Answer 1 · 2010-03-20T14:54:51+00:00

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>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<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>&nbsp; </td>
    <td>&nbsp; </td>
</tr>
<tr>
    <td>&nbsp; </td>
    <td>&nbsp; </td>
</tr>
<tr>
    <td>&nbsp; </td>
    <td>&nbsp; </td>
</tr>
<tr>
    <td>&nbsp; </td>
    <td>&nbsp; </td>
</tr>
<tr>
    <td>&nbsp; </td>
    <td>&nbsp; </td>
</tr>
<tr>
    <td>&nbsp; </td>
    <td>&nbsp; </td>
</tr>
<tr>
    <td>&nbsp; </td>
    <td>&nbsp; </td>
</tr>
<tr>
    <td>&nbsp; </td>
    <td>&nbsp; </td>
</tr>
<tr>
    <td>&nbsp; </td>
    <td>&nbsp; </td>
</tr>
<tr>
    <td>&nbsp; </td>
    <td>&nbsp; </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????????

calling javascript function with row click

Recommended Answers

All 2 Replies