CODEWITHSUNDEEP
javascriptphpjquery
Irene T.
Irene T.

Reputation: 1393

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

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;
    });
});

});

Upvotes: 0

Views: 385

Answers (1)

M Khalid Junaid
M Khalid Junaid

Reputation: 64466

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.

Upvotes: 1

Related Questions