CODEWITHSUNDEEP
jquery
Robert Ross
Robert Ross

Reputation: 1189

Getting the value and the id of the closest input field

I have an edit icon and when clicked this icon invokes a method. In this method I will need the value and the ID attribute's value. I tried to do this with jquery in a couple of ways, non of which worked.

Here is my 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>

When the span is clicked, i'd like to get the value of the input field in left, as well as it's id (in this case "phone").

What I tried and didn't work :

For the ID :

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

For the value : 

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

Of course, I tried many variations of there, but nothing worked(i am very new to this).

Upvotes: 1

Views: 4102

Answers (3)

guest271314
guest271314

Reputation: 1

Note, id of element within document should be unique. If there is only one element in document which has id "phone", then you could simply use $("#phone") to select the element. Else, substitute class for id at <input> elements, then use 

this.parentElement.previousElementSibling

within ".input-group span" click event handler to select <input> element which is previous sibling of parent .input-group-addon element.

Note also that the <input> element does not have a value set at 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>

Upvotes: 2

Isuru Lakshan
Isuru Lakshan

Reputation: 70

Use closest to find the closest ancestor matching the given selector Then use find to find the input with the given name using the attribute equals selector. Example 

<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();

Upvotes: 1

Dekel
Dekel

Reputation: 62556

You need to pass the current element that was clicked (using onclick="editUserInfo(this)"), this way you can use that element as a reference inside your function. Otherwise - the this variable will reference to the window object, (which is not what you are looking for).

Inside the function you can find the input.form-control by going to the parent element that has the input-group class.

Check this example:

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>

I added the click text inside the <span> tag only for visibility...

Upvotes: 3

Related Questions