Reputation: 503
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.
Upvotes: 8
Views: 24685
Reputation: 51052
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]')
Upvotes: 1
Reputation: 707
Can you select your textbox using id ?
$(function() {
$('button.sendInfo').live('click', function() {
//what about this:
var id = $('#textBoxID').val();
alert(id);
//or this
var id2 = $('+ input', this).val();
alert(id2);
});
});
Upvotes: 0
Reputation: 342635
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.
Upvotes: 20