jquery find element next to another

Question

Hi I have the following html:

<p>  
    <input type="text" name="field1"/> <input type="hidden" name="fieldh1"/>  
    <button type="button" class="sendInfo">Send</button>  
</p>  
<p>  
    <input type="text" name="field2" /> <input type="hidden" name="fieldh2"/>  
    <button type="button" class="sendInfo">Send</button>  
</p>  

What I want is that when user clicks the button, I need to send using ajax the contents of the field field.

This is what i'm trying to do with no success.

$(function() {
        $('button.sendInfo').live('click', function() {
            var id = $(this).parent().next('[type=text]').val();
            alert(id);
        });
    });

I plan to set what the user types in textbox to the hidden field, and the value received from the ajax call to normal textbox. But the problem is that i can´t even get the value of the textbox that is in the same line as the button the user clicks. Can anyone help me? Thanks a lot.

Answer 1

Try:

$(this).siblings('input:text').val();

Or change next to find:

$(this).parent().find('[type=text]').val();

as next only searches the immediate following sibling.

Answer 2

I can use jQuery.next() function.

Answer 3

Your issue is that "next()" is going to the next sibling of the parent -- and the parent is the <p> tag, so the sibling, if it exists, is the following <p> tag.

You want $(this).parent().children('[type=text]').val() or $(this).parent().find('[type=text]')