Get a value from an input field

Question

I am using the code below using jQuery and AJAX, to update my database.

Deletion works perfectly, but the edit function is not working. How is it possible to get the value from each input field?

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

Javascript code:

$(document).ready(function() {

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

            alert(cvalue);

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

Answer 1

Add this in your java script function

 $(document).ready(function() {
    $(function() {
    $(".save_button").click(function() {

        var inputVal=$("#channelName").val();

        //rest of your code

         return false;
        });
       });
     });

you'll get the value of an input field(as per your question) in inputVal variable.

In order to get the values of all input fields,give them a common class name instead of giving style there like this

<input class="myInput" type="text" value="red" id="one"/>
<input class="myInput" type="text" value="France" id="two" />

and then in your javascript add this

var inputValues= {};
$(".myInput").each(function() {
    inputValues[$(this).attr("id")] = $(this).val();
});

alert(inputValues.one); // "red"

you'll get the value of all input fields in inputValues variable

Answer 2

can u be more explicit? What do you need to get? Value of all input elements? if yes .. use $('input[name=example]').each(function(){}) this will get all values of all input with specified name

Answer 3

I guess what you're trying to do is submit the value of your input field as cvalue ? To do this, the best approach would be:

$(".save_button").click(function() {
  var id = $(this).attr("id");
  var parent = $(this).parent();
  var cvalue = parent.find('input').val(); // this gets the value of the <input> field
  var dataStringe = 'id='+ id + '&cvalue='+ cvalue;

  // the rest of your code...
});