I have the following HTML

           <li class='user_attributes'><b>username: </b>{{username}}
                <input class='user_input form-control edit_fields {{_id}}' id='username_field' type="text" name='username' placeholder="username">
                <button type="submit" class="btn btn-default submit_button edit_fields {{_id}}" id='update_username'>update</button>
          </li>

And I'd like to get the value of the input field whenever that <li>'s submit button is clicked (not the value of other input fields with the same name).

I have the following jQuery, but all of it returns undefined:

    'click #update_username': function(ev, template){
        ev.preventDefault();

        // var username_field = template.$('input[id="username_field"]').val();

        // var username_field = $(ev.target).find('[name = message]').val();

        var input_field = $(this).siblings($('input[id="username_field"]')).val();

        console.log(input_field);

        // Meteor.call('updateUsername', this._id, username_field);

    }

EDIT

this is an issue of the framework Im using (Meteor.js) and the scope of 'this'

I have the following HTML

           <li class='user_attributes'><b>username: </b>{{username}}
                <input class='user_input form-control edit_fields {{_id}}' id='username_field' type="text" name='username' placeholder="username">
                <button type="submit" class="btn btn-default submit_button edit_fields {{_id}}" id='update_username'>update</button>
          </li>

And I'd like to get the value of the input field whenever that <li>'s submit button is clicked (not the value of other input fields with the same name).

I have the following jQuery, but all of it returns undefined:

    'click #update_username': function(ev, template){
        ev.preventDefault();

        // var username_field = template.$('input[id="username_field"]').val();

        // var username_field = $(ev.target).find('[name = message]').val();

        var input_field = $(this).siblings($('input[id="username_field"]')).val();

        console.log(input_field);

        // Meteor.call('updateUsername', this._id, username_field);

    }

EDIT

this is an issue of the framework Im using (Meteor.js) and the scope of 'this'

• javascript
• jquery
• html

• This should work if your HTML is valid. – putvande Commented Apr 29, 2015 at 21:45

3 Answers 3

Try that

https://jsfiddle/zy7qy3v5/3/

$('button').click(function(){
    var value = $(this).siblings('input').val();
    alert(value);
})

Dont put an unecessary jquery object in the siblings function. Your selector is returning every siblings.

$('button').siblings('input')  //Returns 1 element

is not the same as

$(this).siblings($('input[id="username_field"]'))   //Returns 2 element

See https://jsfiddle/8x04nbyx/5/

$(document).ready(function(){
    $('#update_username').on('click',function(ev, template){
        ev.preventDefault();

        // var username_field = template.$('input[id="username_field"]').val();

        // var username_field = $(ev.target).find('[name = message]').val();

          var input_field = $(this).closest('li').find('input').val();

        console.log(input_field);

        // Meteor.call('updateUsername', this._id, username_field);

    });
});

I'm not sure if it's this that you want but give it a try:

$('#update_username').click(function(){
               var test = $('#username_field').val() 
               alert (test)
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class='user_attributes'><b>username: </b>{{username}}
                <input class='user_input form-control edit_fields {{_id}}' id='username_field' type="text" name='username' placeholder="username">
                <button type="submit" class="btn btn-default submit_button edit_fields {{_id}}" id='update_username'>update</button>
          </li>