Submit Value With Javascript

Question

I'm a stuck with the following function:

<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.

• jeremyosborne: I'm not a great server side programmer, but I'm picking stuff up quickly. I am a pretty good javascript programmer, if there is such a thing. Question for you: Can you, within the same removeElement function, send a cgi, restlike, or dynamic script tag request via XMLHttpRequest back to the server?
• Lea: @jeremyosborne -> urmmm? I wouldnt have the slightest clue? I am a total noob when it comes to javascript.
• almog.ori: are you using some clientside framework, Jquery, scriptaculos, moo tools. it all becomes super easy then.
• jeremyosborne: We're starting a good comment thread here, but maybe we can get your question answered. @Ori has a point, it's very easy, but can you tell us what the url would look like were we to simply send a query to your CMS to delete the content?
• Lea: @jeremyosborne - page.php?delete=elementID

Answer 1

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.

• Lea: Hi, Thanks!! It all works fine, except instead of the element being deleted, only the link is being deleted? I tried link.closest('tr').remove(), and just changed the tr, to div... but its not working? Any suggestions?
• Tatu Ulmanen: Depends on what you want to delete. If the delete link is inside the element you are trying to delete, then .closest('div'); should work. If it's not, you must try something else. Check out jQuery's documentation on traversing and selectors on docs.jquery.com.

Answer 2

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>

• Lea: Thanks! So how would I integrate this into the existing code without breaking the removeElement() functionality? Could you give me an example please?
• Lea: Thanks again! I am receiving an error from firebug *missing formal parameter using your snippet. Also URLTOSCRIPT -? Do I replace this with url to the page that will handle data? Sorry if my noobness is annoying
• almog.ori: Yes replace urltoscript inclusive of the {} and replace in the second param $child.id with the actual value required. ie ID=3 or ID=SWK01 ...
• Lea: Sorry I take so long... I couldnt get your snippet to work. It doesnt post, and it returns the error missing formal parameter

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 }

• Lea: The JS function is sitting in a PHP page of functions. It still outputs as your code would suggest to.