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

DReade83Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
hieloConnect With a Mentor Commented:
I tested the code below and it works. Save it as test.html. Update the line in the javascript that say:
objCheckbox.action='http://www.yoursite.com/yourscript.php';

so tha it "points" to the script that will process the data. Also, notice that i gave the form an id.
<?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>
 <script type="text/javascript"><!--
// Javascript
function deleteRow() {
    var deletedRow = "";
    objCheckbox = document.forms.theForm;
   	
    for( var i=0, limit= objCheckbox.elements.length; i < limit; ++i)
    {
		if(String(objCheckbox.elements[i].type).toLowerCase()=="checkbox" && objCheckbox.elements[i].checked)
		{
			deletedRow += "," + objCheckbox.elements[i].name;
		}
    }
 
    if(deletedRow != "")
    {
    		document.getElementsByName("delete")[0].value = deletedRow.substring(1);
    		objCheckbox.action='http://www.yoursite.com/yourscript.php';
    		objCheckbox.method="get";
    		document.forms.theForm.submit();
		return true;
    }
    
} 
//--></script>
</head>
<body>
 
<form id="theForm" method="get" action="">
<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();return true;">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>
 
 
</body>
</html> 
   

Open in new window

0
 
BadotzCommented:
Where do you submit your request to the server? What does the PHP code look like?
0
 
DReade83Author Commented:
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

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
hieloCommented:
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

0
 
DReade83Author Commented:
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.
0
 
hieloCommented:
Describe "Not working". What do expect it to do?
0
 
hieloCommented:
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

0
 
Michel PlungjanIT ExpertCommented:
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

0
 
Michel PlungjanIT ExpertCommented:
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

0
 
DReade83Author Commented:
I've put the code in, selected the tickboxes, hit Delete and nothing happens.
0
 
DReade83Author Commented:
Much appreciated, that worked a treat. Thanks a lot. :-)
0
All Courses

From novice to tech pro — start learning today.