CODEWITHSUNDEEP
javascriptjquery
smartius
smartius

Reputation: 653

Why does val() returns undefined?

i try to get the value of the next hidden input field when a button is clicked but my script always returns "undefined". What am i doing wrong and why does val() returns undefined? If only try to select the element with next('input:hidden') the function returns an object.

        <div class="row-fluid">
            <div class="span12">
                <div class="message-ratebox">
                    <ul class="unstyled inline">
                        <li>
                            <button class="rating-button" id="rating-first" value="1">
                                Er will dich
                            </button>1
                        </li>
                        <li>
                            <button class="rating-button" id="rating-second" value="2">
                                Er will dich nicht
                            </button>5
                        </li>
                        <li>
                            <button class="rating-button" id="rating-third" value="3">
                                Es ist alles offen
                            </button>2
                        </li>
                    </ul>
                    <input type="hidden" name="target_message_id" value="1" />
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="message-ratebox">
                    <ul class="unstyled inline">
                        <li>
                            <button class="rating-button" id="rating-first" value="1">
                                Er will dich
                            </button>1
                        </li>
                        <li>
                            <button class="rating-button" id="rating-second" value="2">
                                Er will dich nicht
                            </button>5
                        </li>
                        <li>
                            <button class="rating-button" id="rating-third" value="3">
                                Es ist alles offen
                            </button>2
                        </li>
                    </ul>
                    <input type="hidden" name="target_message_id" value="2" />
                </div>
            </div>
        </div>

JavaScript:

$(document).ready(function() {
    $('button.rating-button').click(function(event) {
        event.preventDefault();
        var $rating = $(this).attr('value');
        var $messageId = $(this).next('input:hidden').val();

        alert('test'+$messageId);
    });
});

Upvotes: 1

Views: 5032

Answers (3)

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26153

You need to parse back up from the button to the input's container, which in this case is the nearest div, and then parse back down to the hidden input...

$('button.rating-button').click(function(event) {
    event.preventDefault();
    var $rating = $(this).val();
    var $messageId = $(this).closest("div").find('input[type=hidden]').val();
    alert($rating + $messageId);
});

Upvotes: 0

MAAAAANI
MAAAAANI

Reputation: 196

        $('button.rating-button').click(function(event) {
            event.preventDefault();
            var $rating = $(this).val();
            var $messageId = $(this).parent().parent().parent().find('input').val();
            alert($rating + $messageId );

           });

Upvotes: 0

VisioN
VisioN

Reputation: 145458

It happens because there is no next element for <button>. You have to go up the DOM tree until <div> and find the hidden element:

var $messageId = $(this).closest(".message-ratebox").find("input:hidden").val();

or to go up until <ul> and select the next element:

var $messageId = $(this).closest("ul").next("input:hidden").val();

Upvotes: 4

Related Questions