asked on

Using a checkbox to select row, followed by a button to action the request

I have a page with a list of search results, all with a checkbox featuring a dedicated "name" value. There's a button on the left-side of the page, which when you click it, should send a PHP query (&delete=<name_id>) and complete the request, in this case delete the row(s) from the database.

Attached is the code I'm currently using, but it's not working.

Any ideas?

// HTML Button
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="StyledButton StyledButton_N_127" onMouseOver="this.className='StyledButton StyledButton_N_127 StyledButton_N_127_Hover'" onMouseOut="this.className='StyledButton StyledButton_N_127'" onClick="deleteRow()">Delete</td>
  </tr>
</table>
 
// HTML Row
<table>
  <tr class="Row" onMouseOver="this.className='RowHL'" onMouseOut="this.className='Row'">
    <td class="Row">
      <input onMouseOver="this.style.cursor='pointer'" type="checkbox" name="1" style="padding: 0px; margin: 0px;"></td>
    <td>Result 1</td>
  </tr>
  <tr class="Row" onMouseOver="this.className='RowHL'" onMouseOut="this.className='Row'">
    <td class="Row">
      <input onMouseOver="this.style.cursor='pointer'" type="checkbox" name="2" style="padding: 0px; margin: 0px;"></td>
    <td>Result 2</td>
  </tr>
</table>
 
// Javascript
function deleteRow() {
    var objCheckbox;
    var i = 0;
    var boolCheckbox = true;
    var deleteRow = "";
    objCheckbox = document.forms[0].elements[i];
    if(!objCheckbox) {
        boolCheckbox = false;
    }
    while(boolCheckbox == true) {
        if(objCheckbox.checked) {
            deleteRow = deleteRow+","+objCheckbox.name;
        }
        objCheckbox = document.forms[0].elements[i];
        if(!objCheckbox) {
            boolCheckbox = false;
        }
        i++;
    }
    if(deleteRow != "") {
        location.href = location.href+"&delete="+deleteRow;
    }
}

Open in new window

Badotz

Where do you submit your request to the server? What does the PHP code look like?

DReade83

ASKER

The request is posted to the same page, where there's a PHP function attached which handles all the code

The PHP is attached.

<?php
    if(isset($_GET['delete'])) {
        $row = $_GET['delete'];
        $sql = '<sql_query>';
        mysql_query($sql);
        header('Location: /index.php?act=done'); exit();
    }
?>

Open in new window

hielo

You are not connection to the database anywhere! You need to connect to the database and write the pertaining DELETE sql command. Your code should look similar to the code below. Provide the correct tablename on the sql string

<?php
    if( isset($_GET['delete']) ) {
    		//the input comes as a comma-separted list so you need to break it to 
		//process each record
        $rows = explode(",",$_GET['delete']);
	   
	   	//provide the appropriate info for your db
		$link = mysql_connect('localhost', 'mysql_user', 'mysql_password') or die( mysql_error() );
 
		//select the name of the database that contains the table you are querying
		$db_selected = mysql_select_db('foo', $link) or die( mysql_error() );
 
	   	for($i=0, $limit=count($rows); $i < $limit; ++$i)
	   	{
        		$sql = 'DELETE FROM TABLENAME WHERE ID = ' . $rows[$i] . ' LIMIT 1';
        		mysql_query($sql);
		}
        	header('Location: /index.php?act=done'); exit();
    }
?>

Open in new window

DReade83

ASKER

The problem isn't with the PHP. The code I attached was just an example. The problem I have is the Javascript isn't working.

hielo

Describe "Not working". What do expect it to do?

hielo

Try the code below. Save it as hielo.html, select checkboxes and click Delete.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
 
<form>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="StyledButton StyledButton_N_127" onMouseOver="this.className='StyledButton StyledButton_N_127 StyledButton_N_127_Hover'" onMouseOut="this.className='StyledButton StyledButton_N_127'" onClick="deleteRow()">Delete</td>
  </tr>
</table>
 
// HTML Row
<table>
  <tr class="Row" onMouseOver="this.className='RowHL'" onMouseOut="this.className='Row'">
    <td class="Row"><input type="hidden" name="delete" value=""/>
      <input onMouseOver="this.style.cursor='pointer'" type="checkbox" name="1" style="padding: 0px; margin: 0px;"></td>
    <td>Result 1</td>
  </tr>
  <tr class="Row" onMouseOver="this.className='RowHL'" onMouseOut="this.className='Row'">
    <td class="Row">
      <input onMouseOver="this.style.cursor='pointer'" type="checkbox" name="2" style="padding: 0px; margin: 0px;"></td>
    <td>Result 2</td>
  </tr>
</table>
</form>
 <script type="text/javascript"><!--
// Javascript
function deleteRow() {
    var deleteRow = "";
    objCheckbox = document.forms[0];
   	
    for( var i=0, limit= objCheckbox.elements.length; i < limit; ++i)
    {
		if(objCheckbox.elements[i].type=="checkbox" && objCheckbox.elements[i].checked)
		{
			deleteRow += "," + objCheckbox.elements[i].name 
		}
    }
 
    if(deleteRow != "") {
    objCheckbox.delete.value = deleteRow.substring(1);
    objCheckbox.action=location.href;
    objCheckbox.method="get";
    objCheckbox.submit();
    }
} 
//--></script>
 
</body>
</html>

Open in new window

Michel Plungjan

I think you did not mean to name the form objCheckbox?

Points to Hielo...

function deleteRow() {
  var deleteRow = "";
  objForm = document.forms[0];
  for(var i=0, limit= objForm.elements.length; i < limit; ++i) {
    if(objForm.elements[i].type=="checkbox" && objForm.elements[i].checked) {
      deleteRow += ", " + objForm.elements[i].name;
    }
  }
  if(deleteRow != "") {
    objForm.delete.value = deleteRow.substring(1);
    objForm.action=location.href;
    objForm.method="get";
    objForm.submit();
  }
}

Open in new window

Michel Plungjan

PS: Here is the script with only the location change which I wrote before I saw hielo's last comment:

<script>
// Javascript
function deleteRow() {
  var deleteRow = "";
  var objCheckbox;
  var theForm = document.forms[0];
  for (var i=0, n=theForm.elements.length;i<n;i++) {
    objCheckbox = theForm.elements[i];
    if (objCheckbox.type!='checkbox' || !objCheckbox.checked) continue;
    deleteRow += ", "+objCheckbox.name;
  }
  if(deleteRow != "") {
    deleteRow = deleteRow.substring(2); // remove the leading comma and space
    location.href+="&delete="+deleteRow;
  }
}
</script>

Open in new window

DReade83

ASKER

I've put the code in, selected the tickboxes, hit Delete and nothing happens.

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

DReade83

ASKER

Much appreciated, that worked a treat. Thanks a lot. :-)