Reload HTML table when the Checkbox is checked

krmreddy · December 21, 2007

Hello, Please help me to change the data in a html table when a checkbox is clicked. I am filling the table with some data in the foam load using PHP, when the check box is checked i want to reload the table with different data from the same table.

Thanks

p2grace · December 21, 2007

The best way to do this is using ajax (I prefer xajax). Otherwise the most stable alternative would be something like this:

<input type="check" onclick="window.location= 'filename.php?orderby=2';" /> Change Order

Then change the query based off of the $_GET variables added by the checkbox

mbeals · December 21, 2007

Let me see if I have this correct.

You have a table of data and a single check box. You want to reload different data into this table when the check box is selected. So the check box is acting like a button? I assume when you uncheck the box, you want the origional data to be restored?

User interaction on this level is client side....you will need a combo of javascript and php to make it work. I use this construct a lot and it is really usefull.

First of all, you will need a page with a <div> and an ajax function that calls the php and loads data into that div. You will need to pass a variable through the ajax into the called php to tell the php if it needs to load the checked or unchecked data. It sounds really complex, but I promise it isn't.

Here's an example

<script>
function loaddata(check)
  {
  var xmlHttp;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      catch (e)
        {
        alert("Your browser does not support AJAX!");
        return false;
        }
      }
    }
    xmlHttp.onreadystatechange=function()
      {
      if(xmlHttp.readyState==4)
        {
                //###load results of php file into div 'data'
	document.getElementById('data').innerHTML = xmlHttp.responseText;
        }
      }
   //###### run loadstuff.php and pass in variable 'check'
    xmlHttp.open("GET","loadstuff.php?check="+check,true);
    xmlHttp.send(null);
  }

//##########load something when page loads###########
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

addLoadEvent(loaddata());

</script>


<form name='frm'>
<input type="checkbox" name="check"  onClick="loaddata(window.document.frm.check.value)"/>
</form>

<div id='data'></div>

I didn't test that code, but it 'should' would. Place it all in your body tag. You will need to take your current script (i called it loadstuff.php....update it in the above code) that dynamically generates the table and add:

$check = $_GET["check"];

then add some sort of testing to load a different table depending on the value of $check.

So...what happens. When you click the check box, the onclick event handler reloads the table into the div. When it does this, it passes in the state of the box (checked or unchecked). The php catches which version of the table needs to be loaded and creates the appropriate HTML, which the ajax loads into the div.

You may also need to add some js to handle the change in checkbox value. I use:

function checkfxn(value)
{
if(value == "yes")
{window.document.frm.check.value = "no";
}else {
	window.document.frm.check.value = "yes";
	}
loaddata(window.document.frm.check.value);
}

clear as mud?

krmreddy · December 21, 2007

Thanks,

I am very new to PHP and HTML, I have 2 check boxes, in the page load one check box (open) is checked and the table dispalys the open cases if i check closed check box then it should get the closed case from DB and show them in the same table. if both open and closed checkboxes are checked get both the cases and dispaly them in the table.

Here is my code:

function db_connect(){

$login = 'xxx';

$password = 'xxxx';

$db = '(DESCRIPTION = (ADDRESS_LIST = (ADDRESS = (PROTOCOL = TCP)(Host = xxxx )(Port = xxxx )) ) (CONNECT_DATA = (SID = xxxx)))';

$conn = oci_connect($login, $password, $db );

if (!$conn) {

$e = oci_error();

print htmlentities(' DB Error: ' .$e['message']);

die();

}

return $conn;

}

$conn = db_connect();

//echo "Getting Cases...";

$sql = "select from table where condition = 'Open'";

// Parsing the query

$stid = oci_parse($conn, $sql);

if (!$stid) {

$e = oci_error($conn);

die();

}

// Execute the query and assign to a list object

$lst = oci_execute($stid, OCI_DEFAULT);

if (!$lst) {

$e = oci_error($stid);

die();

}

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<HEAD>

<TITLE>eDesk Dashboard</TITLE>

<!--

function condition_check(condition)

{

if(condition.open.checked == true &&

condition.close.checked == true) {

//DISPLAY BOTH OPEN and CLOSED CASES

}

else if (condition.open.checked)

{

//DISPLAY ONLY OPEN CASES

}

else if (condition.close.checked)

{

//DISPLAY ONLY CLOSED CASES

}

else if (condition.open.checked == false &&

condition.close.checked == false)

{

condition.open.checked = true;

//DISPLAY ONLY OPEN CASES

}

//-->

</SCRIPT>

</HEAD>

<INPUT TYPE=CHECKBOX NAME="close" onClick="condition_check(this.form)">Closed<BR>

</DIV>

<TABLE>

<TD>Summery</TD>

<TD>Status</TD>

<TD>Owner</TD>

</TR>

<?php

while ($row=oci_fetch_array($stid)) {

?>

<tr>

</tr>

<?php

}

?>

</TABLE>

</DIV>

</BODY>

</HTML>

Let me see if I have this correct.

You have a table of data and a single check box. You want to reload different data into this table when the check box is selected. So the check box is acting like a button? I assume when you uncheck the box, you want the origional data to be restored?

User interaction on this level is client side....you will need a combo of javascript and php to make it work. I use this construct a lot and it is really usefull.

First of all, you will need a page with a <div> and an ajax function that calls the php and loads data into that div. You will need to pass a variable through the ajax into the called php to tell the php if it needs to load the checked or unchecked data. It sounds really complex, but I promise it isn't.

Here's an example
<script>
function loaddata(check)
  {
  var xmlHttp;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      catch (e)
        {
        alert("Your browser does not support AJAX!");
        return false;
        }
      }
    }
    xmlHttp.onreadystatechange=function()
      {
      if(xmlHttp.readyState==4)
        {
                //###load results of php file into div 'data'
	document.getElementById('data').innerHTML = xmlHttp.responseText;
        }
      }
   //###### run loadstuff.php and pass in variable 'check'
    xmlHttp.open("GET","loadstuff.php?check="+check,true);
    xmlHttp.send(null);
  }

//##########load something when page loads###########
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

addLoadEvent(loaddata());

</script>


<form name='frm'>
<input type="checkbox" name="check"  onClick="loaddata(window.document.frm.check.value)"/>
</form>

<div id='data'></div>
I didn't test that code, but it 'should' would. Place it all in your body tag. You will need to take your current script (i called it loadstuff.php....update it in the above code) that dynamically generates the table and add:

$check = $_GET["check"];

then add some sort of testing to load a different table depending on the value of $check.

So...what happens. When you click the check box, the onclick event handler reloads the table into the div. When it does this, it passes in the state of the box (checked or unchecked). The php catches which version of the table needs to be loaded and creates the appropriate HTML, which the ajax loads into the div.

You may also need to add some js to handle the change in checkbox value. I use:
function checkfxn(value)
{
if(value == "yes")
{window.document.frm.check.value = "no";
}else {
	window.document.frm.check.value = "yes";
	}
loaddata(window.document.frm.check.value);
}
clear as mud?

Sign In

Reload HTML table when the Checkbox is checked

Recommended Posts

krmreddy

Link to comment

Share on other sites

p2grace

Link to comment

Share on other sites

mbeals

Link to comment

Share on other sites

krmreddy

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information