CODEWITHSUNDEEP
javascriptjqueryhtml
nix9
nix9

Reputation: 638

jQuery getting previous input value

<div class="panel-footer">
    <div class="input-group">
        <input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Wpisz tutaj swoją wiadomość..." />
        <span class="input-group-btn">
            <button class="btn btn-primary btn-sm" id="btn-chat">Wyślij</button>
        </span>
    </div>
</div>

I have HTML like above. My question is how to get the input value when I click on #btn-chat. I have been trying of jQuery functions like .prev() and .prevAll() but those didn't work for me.

Upvotes: 1

Views: 1192

Answers (3)

PeterKA
PeterKA

Reputation: 24638

As @RoryMcCrossan has pointed out, if you have multiple elements with the same id attribute, you would need to use a class attribute instead.

$(function() {
    $('.btn-chat').on('click', function() {
        var val = $(this).closest('.input-group').find('input.btn-input').val();
                  //OR $(this).parent().prev().val();
        console.log( val );
    });
});


$(function() {
    $('.btn-chat').on('click', function() {
        var val = $(this).closest('.input-group').find('input.btn-input').val();
        console.log( val );
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-footer">
    <div class="input-group">
        <input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
        <span class="input-group-btn">
            <button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
        </span>
    </div>
</div>


<div class="panel-footer">
    <div class="input-group">
        <input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
        <span class="input-group-btn">
            <button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
        </span>
    </div>
</div>

<div class="panel-footer">
    <div class="input-group">
        <input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
        <span class="input-group-btn">
            <button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
        </span>
    </div>
</div>

Upvotes: 0

Ebad ghafoory
Ebad ghafoory

Reputation: 1304

$("#btn-chat").click(function(){
    var input_values = $(this).parent().parent().find("input").val();
    alert(input_values);
});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

Given that the input element has an id attribute it should be unique, so you can select it directly without the need to traverse the DOM:

$('#btn-chat').click(function() {
    var inputVal = $('#btn-input').val();
    // do something with the value here...
});

If, for whatever reason, you still want to use DOM traversal you can use closest() to get the nearest common parent to both elements, and then find():

$('#btn-chat').click(function() {
    var inputVal = $(this).closest('.input-group').find('input').val();
    // do something with the value here...
});

If you have multiple elements in your page with the same id attribute then your HTML is invalid and you would need to change it. In that case, use class attributes to identify and select the elements.

Upvotes: 1

Related Questions