how to select input field in listed form with jquery

Question

Hi,

I got several forms listed through a loop at one page such like this: (extract)

if(mysql_num_rows($r)>0): 
while($row = mysql_fetch_assoc($r)):  ?>
        <form id="myForm" action="save_fb.php" method="post"> 

        Title: <input type="text" name="fb_title" value="<?php echo $row['fb_title']; ?>" /><br> 

    <a href="javascript:;" class="save_fb" id="<?php echo $row['fb_id']; ?>"></a>


        </form>

in my ajax request i do something like:

  $.ajax({
   type: "POST",
   data: $("input:text[name=fb_titel]").val()+$(this).attr("id"),
   url: "save_fb.php",
   success: function(msg)
   {
    $("span#votes_count"+the_id).fadeOut();
    $("span#votes_count"+the_id).html(msg);
    $("span#votes_count"+the_id).fadeIn();
   }
  });
 });

now I get as an result always first row and not the row where the link was clicked however the $(this) works fine but I do not know how to combine... Anyone know how the data line should look like?

Thanks for any hint =)

Answer 1

Try this:

  $.ajax({
   type: "POST",
   data: $(this).prev("input[name=fb_title]").val()+$(this).attr("id"),
   url: "save_fb.php",
   success: function(msg)
   {
    $("span#votes_count"+the_id).fadeOut().html(msg).fadeIn();
   }
  });
 });

Answer 2

Change the third line of your script like so....

data: $(this).parent().find("input:text[name=fb_title]").val()+$(this).attr("id"),

Your current script finds the first instance of any <input name="fb_title">. If you use this it will only find the <input name="fb_title"> in the same form as the link you clicked.

Answer 3

The PHP/HTML:

mysql_num_rows($r)>0): 
while($row = mysql_fetch_assoc($r)):  ?>
        <form id="myForm-<?php echo $row['fb_id']; ?>" action="save_fb.php" method="post"> 

        Title: <input type="text" name="fb_title" value="<?php echo $row['fb_title']; ?>" /><br> 

    <a href="javascript:;" class="save_fb" id="<?php echo $row['fb_id']; ?>"></a>


        </form>

The jQuery:

  var id = $(this).attr("id"); 
  $.ajax({
   type: "POST",
   data: $("input:text[name=fb_titel]", "#myForm-" + id).val() + id,
   url: "save_fb.php",
   success: function(msg)
   {
    $("span#votes_count"+the_id).fadeOut();
    $("span#votes_count"+the_id).html(msg);
    $("span#votes_count"+the_id).fadeIn();
   }
  });
 });