How To Get Post Values Of Tags

I need to post these values of my td tags as this an editable table using jquery. I'm not sure if the issue here is with the script or the td tags? Currently my var_dump($_POST) is

Solution 1:

First issue: unique ids

You cannot have multiples of the same id in your HTML - this is invalid code and will provide inconsistent and/or incorrect results in your code.

To fix this change the id on the <td> elements into a class:

echo "<td class=\"edit_name\" name=\"edit_name\">". $row['template_name']. "</td>";
echo "<td class=\"edit_template\" name=\"edit_template\">". nl2br($temp_description). "</td>";

Second issue: no value being posted

You are creating an <input> in the <td>, then grabbing the <td>'s value, then replacing the content of the <td> with the value of the <input>.

There are three issues here:

1. a <td> element doesn't have a value - you should be using .text() to grab its content instead of .val().

2. You are doing this out of order - at the time you grab the content of the <td> it contains an <input>, but no text.

3. Once you replace the content of the <td> the element that this refers to in your keydown event handler (the <input>) no longer has any relation to the DOM so you have to store a reference to another element (eg. the parent element) to perform DOM manipulation.

So in script.js make the following changes:

$(this).children().first().keypress(function (e) {
    if (e.which == 13) {

        var newContent = $(this).val();
        var $parent = $(this).parent();

        $parent.text(newContent);
        $parent.removeClass("cellEditing");

        //POST values
        var edit_template = $parent.closest("tr").find(".edit_template").text();
        var edit_name = $parent.closest("tr").find(".edit_name").text();

        $.post('ajax/name.php', {edit_name: edit_name, edit_template: edit_template}, function(data) {
            $('#template_edit').text(data);
        });  
    }
});

Note I also removed div from the selector in the $.post callback - #id as a selector is quicker in jQuery than element#id, and ids should be unique within the DOM.

Solution 2:

change the order of the code...

var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");

var edit_template = $('#edit_template').text(); //here is not val, is text...
var edit_name = $('#edit_name').text(); //here is not val, is text...

//POST values
$.post('ajax/name.php', {edit_name: edit_name, edit_template: edit_template}, function(data) {
   $('div#template_edit').text(data);
 });  

Solution 3:

I think your problem is here:

$.post('ajax/name.php', {edit_name: edit_name, edit_template: edit_template}

edit_name and edit_template are being used as both a local variable and data key.

I would try:

$(this).children().first().keypress(function (e) {
        if (e.which == 13) {

            $.post('ajax/name.php', {edit_name: $('#edit_name').val(), edit_template:  $('#edit_template').val(), function(data) {
                    $('div#template_edit').text(data);
                    });  

            var newContent = $(this).val();

          $(this).parent().text(newContent);
          $(this).parent().removeClass("cellEditing");
        }
});

Note: this is a stab in the dark and is completely untested!!

You will also have problems if element IDs in your html are not unique.

I would also be looking at associating an ID from your database in here somewhere.