Sign in to follow this  
Followers 0
Original Poster

AJAX PHP and Checkboxes!?!?

8 posts in this topic

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]

Share this post


Link to post
Share on other sites


$("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.

1 person likes this

Share this post


Link to post
Share on other sites

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'

Share this post


Link to post
Share on other sites


$("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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.