獲取值和最近輸入字段

的ID我有一個編輯圖標，點擊此圖標調用的方法。在這種方法中，我將需要值和ID屬性的值。我想在幾個方面與jQuery做到這一點，非其工作。獲取值和最近輸入字段

這裏是我的html：

<div class="col-sm-2"> 
    <div class="input-group"> 
     <input type="text" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"> 
     <div class="input-group-addon"> 
      <span onclick="editUserInfo()"><i class="fa fa-pencil" aria-hidden="true"></i></span> 
     </div> 
    </div> 
</div>

當點擊跨度，我想獲得的輸入字段的值在左，以及它的ID（在這種情況下，「手機」）。

我試過和不工作：

對於ID：

$('selector').closest('[id]')

對於值：

$(this).parent().find('.form-control').val();

當然，我試過有許多變化，但沒有任何工作（我對此很新）。

來源

2016-10-29 Robert Ross

我想用同樣的方法在我的表單中的所有輸入字段。 –

在'document'裏有'id''' phone''多個元素嗎？ – guest271314

您需要傳遞的是被點擊（使用onclick="editUserInfo(this)"）當前元素，這樣你可以使用元素作爲自己的函數中的引用。否則 - 在this變量將參考window對象，（這是你正在尋找沒有什麼）。

通過轉到具有input-group類的父元素，可以在該函數中找到input.form-control。

檢查這個例子：

function editUserInfo(el) { 
 
    input_element = $(el).parents('.input-group').find('input.form-control'); 
 
    console.log(input_element.attr('id')); 
 
    console.log(input_element.val()); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-sm-2"> 
 
    <div class="input-group"> 
 
    <input type="text" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"> 
 
    <div class="input-group-addon"> 
 
     <span onclick="editUserInfo(this)"><i class="fa fa-pencil" aria-hidden="true">click</i></span> 
 
    </div> 
 
    </div> 
 
</div>

我加入了click純文字的知名度<span>標籤內...

來源

2016-10-29 16:41:23 Dekel

謝謝你的回答！它像一個魅力:) –

使用最接近找出最接近祖先給定的選擇我們然後匹配e查找使用屬性equals選擇器查找具有給定名稱的輸入。實施例

<div class="options"> 
 
    <div class="phone"> 
 
    <label>Phone:</label> 
 
    <input type="text" name="phone" value="1"/> 
 
    </div>

var val = $(this).closest("div.options").find("input[name='phone']").val();

來源

2016-10-29 16:46:38

注意，內document元件的id應該是唯一的。如果在document只有一個元素具有id"phone"是，那麼你可以簡單地使用$("#phone")選擇的元素。否則，替換爲class在id元件<input>，然後使用

this.parentElement.previousElementSibling

內".input-group span"click事件處理程序以選擇<input>元件，其是親本.input-group-addon元件的前面的兄弟節點。

還要注意，<input>元素沒有value設置爲html。

$(function() { 
 
    $(".input-group span").on("click", function() { 
 
    var input = $(this.parentElement.previousElementSibling); 
 
    var data = { 
 
     "id": input.attr("id"), // `.attr("class")` 
 
     "value": input.val() 
 
    }; 
 
    console.log(data); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-sm-2"> 
 
    <div class="input-group"> 
 
    <!-- `id` should be unique, change to `class` if multiple `id` set to `"phone"` in `document` --> 
 
    <input type="text" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly" value="123-456-7890"> 
 
    <div class="input-group-addon"> 
 
     <span><i class="fa fa-pencil" aria-hidden="true">click</i></span> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-10-29 17:06:52 guest271314

獲取值和最近輸入字段

回答

相關問題