Append the value from an input field to a custom a href parameter

Question

i am using the code bellow to grab some data from my db. Also the code bellow delete records from mysql through ajax call. As you can see for each input field i have a save button and a delete button. I am sending a unique id from each record through the a href.

Now all i want is to pass a custom variable to the a href for my save button. And i mean in each a href i added the value cvalue="".

How is it possible to grab the input value from and append it into this cvalue= "in here i want the value from the input field"

Keep in mind that i have a lot records..

<ol class="update">
<?php
$ss = mysql_query ("SELECT * FROM users_channels WHERE u_id='$uid'");
while($chann = mysql_fetch_assoc($ss)) {
echo'              
<li>
<input name="channelName" type="text" id="channelName" style="float:left; width:300px; border:1px solid #CCC;" value="'.$chann['channel_name'].'" />
<a href="#" id="'.$chann['id'].'" class="delete_button"><span id="rcolor">Delete</span></a>
<a href="#" id="'.$chann['id'].'" cvalue="'.$chann['channel_name'].'" class="save_button"><span id="gcolor">Save</span></a>
</li>';
}
?>
</ol>

And the Jquery Code:

$(document).ready(function() {

$(function() {
$(".save_button").click(function() {
var id = $(this).attr("id");
var cvalue = $("#channelName").val();
var dataStringe = 'id='+ id + '&cvalue='+ cvalue;
var parent = $(this).parent();


alert(curval);

$.ajax({
   type: "POST",
   url: "update_channel.php",
   data: dataStringe,
   cache: false,

   beforeSend: function()
   {
   parent.animate({'backgroundColor':'#fb6c6c'},300).animate({ opacity: 0.35 }, "slow");
   }, 
   success: function()
   {

    //parent.slideUp('slow', function() {$(this).remove();});

  }

 });

return false;
    });
});

});

Don't you know `$(document).ready(function...` is the same as `$(function...` ? — Stphane, Oct 19 '13 at 18:31
it is not my problem now f00bar! in need to solve my problem! Thank — Irene T., Oct 19 '13 at 18:43

score 1 · Accepted Answer · edited May 25 '19 at 14:17

First thing I want to clear id attribute should be unique in overall HTML elements instead you can use class for multiple elements or you can play with unique ids in your loop like below $chann['id']-channelName I assume the id from database is unique

<ol class="update">
<?php
$ss = mysql_query ("SELECT * FROM users_channels WHERE u_id='$uid'");
while($chann = mysql_fetch_assoc($ss)) {
echo'              
<li>
<input name="channelName" type="text" id="'.$chann['id'].'-channelName" style="float:left; width:300px; border:1px solid #CCC;" value="'.$chann['channel_name'].'" />
<a href="#" id="'.$chann['id'].'-delete" class="delete_button"><span id="rcolor">Delete</span></a>
<a href="#" id="'.$chann['id'].'" title="'.$chann['channel_name'].'" class="save_button"><span id="gcolor">Save</span></a>
</li>';
}
?>
</ol>

In you ready function you can get input value as below

$(".save_button").click(function() {
var id = $(this).attr("id");
var cvalue = $("#"+id+"-channelName").val();// you can grab the sibling input value

OR

var cvalue = $(this).attr('title');// you can grab the value from title attribute

var dataStringe = 'id='+ id + '&cvalue='+ cvalue;
var parent = $(this).parent();

// var delete =  $("#"+id+"-delete") to get delete anchor 
});

Once you have used ready no need to use $(function() { inside ready they both are equal

Note for PHP

Please, don't use mysql_* functions in new code. They are no longer maintained and are officially deprecated. See the red box? Learn about prepared statements instead, and use PDO, or MySQLi - this article will help you decide which. If you choose PDO, here is a good tutorial.

Append the value from an input field to a custom a href parameter

1 Answers1

Note for PHP