Question

I have a loop that creates a small number of forms on a page. Here is how the loop-creation looks like in PHP. This code is inside a loop:

echo '<form class="add_suggested_solution_comment"  method="post">';
echo '<p><textarea class="suggested_solution_comment" cols=65 rows=6 ></textarea></p>';
echo '<input type="hidden" class="problem_id" value="'.$problem_id.'" />';                                                  echo '<input type="hidden" class="suggestion_id" value="'.$suggestion_id.'" />';   
echo '<input type="hidden" class="solution_section_id" value="'.$solution_section_id.'" />'; 
echo '<p><input type="submit" class="button" value="Add Comment"></input></p>';             
echo '</form>';

And then I have the jQuery code that gets the values of the form fields like this:

$('.add_suggested_solution_comment').live('submit',function()
{   
    var problem_id = $('.problem_id').val();
    var comment = $(".suggested_solution_comment").val();   
    var solution_id = $('.suggestion_id').val();    
    var solution_section_id = $('.solution_section_id').val();      
        ...

And the problem is that if text is entered into the first textarea, it gets recognized by the line that gets the comment: var comment = $(“.suggested_solution_comment”).val();

But if any of the other textarea fields are entered, their values are not recognized by that line.

Any idea what I am doing wrong?

Thank you!!

Answer 1

Use the context argument of jQuery, like this:

$('.add_suggested_solution_comment').live('submit',function()
{   
    var $this = $(this);
    var problem_id = $('.problem_id', $this).val();
    var comment = $(".suggested_solution_comment", $this).val();   
    var solution_id = $('.suggestion_id', $this).val();    
    var solution_section_id = $('.solution_section_id', $this).val();      
    ...

That will only select the elements within the currently submitting form.