我如何獲得的輸入值，當按鈕被點擊

我有相同的HTML代碼，但id是按鈕不同，現在我想輸入字段的值是最接近按鈕，這是點擊。我如何獲得的輸入值，當按鈕被點擊

這裏是我的html代碼：

<input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend"> 
    <span class="input-group-btn"> 
    <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="38">Send</button> 
    </span> 

<input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend"> 
    <span class="input-group-btn"> 
    <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="39">Send</button> 
    </span>

這裏是我的jQuery代碼：

$(document).on('click', '.btn_chat', function (e) { 
    alert("Button id: "+$(this).val()); 
    alert($(this).closest('input .message').val()); 
});

它將給按鈕值，但輸入值是不確定的

來源

2015-05-29 Rahul Patil

'.btn_chat'指類的屬性。你有'id =「btn_chat」'一個ID，它是重複的。請改變它。 –

我不建議重複'Id's'值將始終在第一'message'輸入顯示。 – NewToJS

刪除'id'屬性，改成這樣：'.parent（）上一頁（ 'input.message'）' – Jai

首先，你應該刪除重複使用id屬性並使用類來對您的元素進行分組。

然後可以使用closest()到DOM遍歷到最近的父span然後用prev()得到input。在選擇

$(document).on('click', '.btn_chat', function (e) { 
    var $input = $(this).closest('span').prev('input.message'); 
    alert($input.val()); 
});

注意input和.message之間的去除的空間，因爲我們都在一個元素上尋求這兩個屬性：試試這個。

來源

2015-05-29 12:33:35

應該有ID和CLASS和之間的區別你是指類.btn-chat這是兩個元素。記住ID應該是唯一的，這樣它會通過您的處理程序進行鑑定。

來源

2015-05-29 12:35:06

你重複你的ID的

但一個簡單的jQuery可以返回你回答：

$(".btn_chat").click(function(){ 
    alert($(this).parents('.input-group').find('input').val()); 
});

Working Fiddle

來源

2015-05-29 12:52:23

我如何獲得的輸入值，當按鈕被點擊

回答

相關問題