Question

I am trying to work out how to post the id and value of a new keyword changed inside a row with an input field.

I basically do a mysql query to collect rows of keywords, i then display the keyword inside an input field with a save button next to it. If you click Save i want to post the id and new keyword value for that row.

I can only get the first row to work, a friend helped me with the jquery for getting id only but can i modify to get keyword value too?

MY HTML/PHP

<?php
$sql = "SELECT * FROM Tags ORDER BY name";
$result = mysql_query($sql);

while ($row = mysql_fetch_array($result)) {
$id      = $row['id'];
$keyword = $row['name'];
?>

<tr id="<?php echo $id;?>"> 

<td><?php echo $id;?></td>

<td><?php echo $keyword;?></td>

<td><input type="text" name="keyword" id="newkeyword" value="<?php echo $keyword;?>"><a class="savenewkeyword" >Save</a></td>

<td><a id="deleteKeyword">x</a></td>

</tr>

<?php } ?>

MY JAVASCRIPT

$('table td .savenewkeyword').click(function(){

var id = $(this).parent().parent().attr('id');   
var name = $('input#newkeyword').attr('id'); 
data = 'id=' + id + '&name=' + name; 
var parent = $(this).parent().parent(); 

$.ajax(  
{
type: "POST", 
url: "update/updatekeyword.php",   
data: data,
cache: false,
success: function()
{
parent.fadeOut('slow');
parent.fadeIn('slow');
}

});
});

So just to recap, im trying to post id and new keyword value for each row.

Any help would be much appreciated.

Also happy new year for soon 😉

John

SOLVED – Thank you DSKVR and Cybermate 😉

<script type="text/javascript" charset="utf-8">

$('table td .savenewkeyword').click(function(){
var id = $(this).parents('tr').attr('id');   
var name = $('input#newkeyword', $(this).parent()).attr('value'); 
data = 'id=' + id + '&name=' + name; 
var parent = $(this).parent().parent(); 

$.ajax({
        type: "POST", 
        url: "update/updatekeyword.php",   
        data: data,
        cache: false,
        success: function()
        {
        parent.fadeOut('slow');
        parent.fadeIn('slow');
        }

    });
});


</script>

Answer 1

Two Things,

• you need to grab the value from the input, not the id.

  switch var name = $('input#newkeyword').attr('id'); with var name = $('input#newkeyword').attr('value');

• you should use .parents('tr') instead of .parent().parent(), while they both work, one is easier to understand without referencing the HTML from the javascript.

Hope this helps, suggested edits illustrated below.

---

$('table td .savenewkeyword').click(function(){
var id = $(this).parents('tr').attr('id');   
var name = $('input#newkeyword').attr('value'); 
data = 'id=' + id + '&name=' + name; 
var parent = $(this).parent().parent(); 
        
$.ajax({
        type: "POST", 
        url: "update/updatekeyword.php",   
        data: data,
        cache: false,
        success: function()
        {
        parent.fadeOut('slow');
        parent.fadeIn('slow');
        }
        
    });
});