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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
DReade83Author Commented:
Much appreciated, that worked a treat. Thanks a lot. :-)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.