• 0

AJAX PHP and Checkboxes!?!?


Question

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>
[/CODE]

[CODE]
<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>
[/CODE]

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0


$("input.delete").click(function(){
$(this).parent().parent().remove();
});
[/CODE]

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.

  • Like 1
Link to comment
Share on other sites

  • 0

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";

?>
[/CODE]

[b]Jquery code to add on page[/b]

[CODE]
<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>
[/CODE]

[b]The HTML for tables:[/b]

[CODE]
<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>

[/CODE]

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

Link to comment
Share on other sites

  • 0


$("input.delete").click(function(){
$(this).parent().parent().remove();
});
[/CODE]

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.

[CODE]
$( "input" ).on( "click", function() { delete = $("input:checked").val() ;});
[/CODE]

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.

Link to comment
Share on other sites

  • 0

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";

?>
[/CODE]

[b]<snip>[/b]

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

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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"]."'";[/CODE]

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.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.