Submit Value With Javascript

Question

Hi All,

Im a little stuck with the following function. Please note, Im a total noob with javascript/ajax, so please bare with me:

<script type="text/javascript">
function removeElement($parentDiv, $childDiv){


     if (document.getElementById($childDiv)) {    
          var child = document.getElementById($childDiv);
          var parent = document.getElementById($parentDiv);
          parent.removeChild($child);
     }
}
</script>

<a href=\"javascript:;\" onClick=\"removeElement('$parent','$child');\">x</a>

This function deletes a child element, and its content, which works great client-side! But I am wanting to pass a value to the server, in the same instance, so the content of the element can be deleted from the mysql database too. I have no idea how to do this, so any suggestions will be very appreciated!

Notes: $child, and $parent are strings generated within the php file, that I use to give each element a unique ID.

Answer 1

Lets say I want to delete an entity using a ID

JQUERY - $.post() This is an easy way to send a simple POST request to a server without having to use the more complex $.ajax function. It allows a single callback function to be specified that will be executed when the request is complete (and only if the response has a successful response code). Jquery post docs

On the server assuming you have an open database connection.

mysql_query("DELETE FROM TABLE WHERE ID = ".$_POST['ID']);

more on mysql_query found here

EDIT:

So the following will only remove the element when the ajax post is complete. Note the first arg is the url to the script that will take the action , second is the data to be sent, in this case the ID post value will be {child.id} and the third is a anon inline callback function that will take action to remove the element client side.

<script type="text/javascript">
function removeElement($parentDiv, $childDiv){
if (document.getElementById($childDiv)) {
          var child = document.getElementById($childDiv);
          var parent = document.getElementById($parentDiv);  
          $.post('{URLTOSCRIPT}', 'ID=$child.id',function () { parent.removeChild($child); });

}}
</script>

Answer 2

To make your life easier, use jQuery or similar framework. Here's how you would do it in jQuery:

$(function() {
    $('.delete').click(function() {
        var link = $(this);
        var id = link.attr('id').replace('element_', '');
        $.ajax({
            url: 'handler.php',
            data: {
                element: id
            },
            type: 'post',
            success: function() {
                link.remove();
                // Or link.closest('tr').remove() if you want to remove a table row where this link is
            }
        });
        return false;
    });
});

The HTML:

<a href="#" class="delete" id="element_20">Remove</a>

And handler.php:

mysql_query("DELETE FROM `table` WHERE id = '".mysql_real_escape_string($_POST['element'])."'");

Always remember to escape database input!

If you're a total noob as you said, you probably won't understand all of this so I suggest you read something about jQuery's AJAX capabilities and about overall development using jQuery or similar JavaScript framework.

Answer 3

When you call the function, you'd want to put your PHP variables in tags like so:

<?php echo $parent; ?>

and

<?php echo $child; ?>

In the function definition, you will want to get rid of the PHP style variables and use something like:

function removeElement(parentDiv, childDiv) { //CODE }