Jump to content



Photo

AJAX PHP and Checkboxes!?!?


  • Please log in to reply
7 replies to this topic

#1 Original Poster

Original Poster

    C++ n00b

  • Tech Issues Solved: 1
  • Joined: 15-July 08
  • Location: my room
  • OS: windows 7, backtrack 5, OSx 10.6

Posted 18 April 2013 - 02:36

Hi all i need some help with my ajax! I am trying to get a real time update of a table...
this is a table row for editing values in the database it is generated over and over in a for loop for each record there is.

Below also is my AJAX which searches a the database for records (which generates the table below)
but I cannot get it to work with the delete check box... when the check box is clicked i want the value to be sent and then the row deleted... any ideas?

<tr>
  <input type='hidden' name='id[]' value='". $id ."'>
  <td>". $id ."</td>
  <td><input type='text' name='carname[]' id='carname' value='". $carname ."' /> </td>
  <td><input type='text' name='fueltype[]' id='fueltype' value='". $fueltype ."' maxlength='8' size='8' /> </td>
  <td><input type='text' name='transmission[]' id='transmission' value='". $trans ."' /> </td>
  <td><input type='text' name='enginesize[]' id='enginesize' value='". $engine ."' maxlength='4' size='4' /> </td>
  <td><input type='text' name='doors[]' id='doors' value='". $doors ."' maxlength='1' size='1' /> </td>
  <td><input type='text' name='total[]' id='total' value='". $total ."' maxlength='4' size='4' /> </td>
  <td><input type='text' name='available[]' id='available' value='". $ava ."' maxlength='4' size='4' /> </td>
  <td>". $date ."</td>
  <td> <input type='checkbox' name='delete[]' id='". $id ."' value='". $id ." /></td>
  <td> <input type='checkbox' name='update[]' value='". $i ."' /></td>
</tr>

<script>
function searchBox() {
param = "sc="+document.getElementById("sc").value;
param = param+"&searchop="+document.getElementById("searchop").value;
param = param+"&submit=Search";
param = param+"&search="+document.getElementById("searchy").value;
run(param);
}
function deleteBox(delVar) {
param = "del=del";
param = param+"&delete="+delVar;
param = param+"&submit=edit";
param = param+"&search="+document.getElementById("searchy").value;
run(param);
}
function run(param) {
var xmlhttp;
document.getElementById("cars").innerHTML = "Loading.."+document.getElementById("cars").innerHTML;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
   document.getElementById("cars").innerHTML=xmlhttp.responseText;
  }
}
xmlhttp.open("POST", "add.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(param);
}
</script>



#2 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 20
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 19 April 2013 - 15:53

$("input.delete").click(function(){
	$(this).parent().parent().remove();
});
Why use complex code when you can remove and add dom element with jquery :p
Above code need the delete class to be added to input or you can use input[name="delete"] instead.

#3 Domain Beans

Domain Beans

    Neowinian

  • Joined: 11-January 11

Posted 29 April 2013 - 19:09

Here is a basic example:

Delete.php (the ajax call file, where your SQL stuff goes)

<?php
$id = $_POST["id"];

// SQL CONNECT HERE

// DELETE SQL STUFF (query example below)

$sql = "DELETE FROM `table_name` WHERE `id`='".$_POST["id"]."'";

echo "done";

?>

Jquery code to add on page

<script>
$(document).ready(function()
{
    $('table#usertable td a.delete').click(function()
    {
	    if (confirm("Are you sure you want to delete this row?"))
	    {
		    var id = $(this).parent().parent().attr('id');
		    var data = 'id=' + id ;
		    var parent = $(this).parent().parent();

		    $.ajax(
		    {
				   type: "POST",
				   url: "delete.php",
				   data: data,
				   cache: false,

				   success: function()
				   {
				    parent.fadeOut('slow', function() {$(this).remove();});
				   }
			 });
	    }
    });
</script>

The HTML for tables:

<table id="usertable">

<thead><tr><td>#</td><td>First Name</td><td>E-Mail</td><td>Manage</td></tr></thead>
<tbody>
<tr id="1">
<td>1</td>
<td>Aaron</td>
<td>email@site.com</td>
<td><a class=\"delete\" href=\"#\">x</a></td>
</tr>

<tr id="2">
<td>2</td>
<td>Peter</td>
<td>email1@site.com</td>
<td><a class=\"delete\" href=\"#\">x</a></td>
</tr>
</tbody>
</table>


I've just written this, so hopefully it works! Let me know if not and I'

#4 threetonesun

threetonesun

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 26-February 02

Posted 29 April 2013 - 19:38

$("input.delete").click(function(){
	$(this).parent().parent().remove();
});
Why use complex code when you can remove and add dom element with jquery :p
Above code need the delete class to be added to input or you can use input[name="delete"] instead.


Better to use jQuery's :checked selector.
$( "input" ).on( "click", function() {  delete =  $("input:checked").val() ;});

Then send the value via AJAX, and when you get a proper response, use .remove() to get rid of the table row, saves you from having to add the .delete class.

#5 Kami-

Kami-

    ♫ d(-_-)b ♫

  • Tech Issues Solved: 2
  • Joined: 28-July 08
  • Location: SandBox

Posted 30 April 2013 - 11:49

Here is a basic example:

Delete.php (the ajax call file, where your SQL stuff goes)

<?php
$id = $_POST["id"];

// SQL CONNECT HERE

// DELETE SQL STUFF (query example below)

$sql = "DELETE FROM `table_name` WHERE `id`='".$_POST["id"]."'";

echo "done";

?>
<snip>

Err... no, this is how NOT to do database stuff EVER.

#6 Domain Beans

Domain Beans

    Neowinian

  • Joined: 11-January 11

Posted 30 April 2013 - 12:21

That bit is just psuedo, was just to give the OP an idea of what to do, I presume he has a database class or some sort of data cleaning classes as I do, I wasn't going to post a class with hundreds of lines to go with it.

#7 threetonesun

threetonesun

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 26-February 02

Posted 30 April 2013 - 12:22

That bit is just psuedo, was just to give the OP an idea of what to do, I presume he has a database class or some sort of data cleaning classes as I do, I wasn't going to post a class with hundreds of lines to go with it.


I think this:
$sql = "DELETE FROM `table_name` WHERE `id`='".$_POST["id"]."'";

Was the bit he was referring to, unless you're designing an application that allows random people to wipe your database for you.

I get what you're saying about it being an example, but it's probably not the best idea to float bits of code out there that are nearly functional.

#8 Domain Beans

Domain Beans

    Neowinian

  • Joined: 11-January 11

Posted 30 April 2013 - 12:29

Yep your right, note to the OP, make sure you validate your data submissions. I can't actually edit my post now.