CODEWITHSUNDEEP
javascriptjquery
Halfpint
Halfpint

Reputation: 4079

jQuery, get text from neighbouring input within a div

I have a component on my page which looks like this:

<div id="componentList">
    <div class="componentPair">
        <div class="left">
            <input type="text" class="part" placeholder="PART NUMBER">
        </div>
        <div class="right">
            <input type="text" class="serial" placeholder="SERIAL NUMBER">
        </div>
    </div>
</div>

A component list can have multiple component pairs nested within it. When performing a search a query cannot be made for a serial number if a part number is not present, therefore when performing a keyup event on the .serial field I need to get the text from the part number field. I would store this in a data model, but by referencing the current serial field I should be able to traverse to the part number field.

Here is what I have tried, when my page loads I bind a keyup event on the serial field, I pass this as the selector so I have reference to the (sender) current field in getData():

$(document).on("keyup", '.serial', function() { getData(this, "SERIAL") });

Then in getData I want to be able to traverse up my DOM structure to the current componentPair group and then traverse into the left div and get the value from Part Number input field.

Here is what I tried: 

function getData(elem, type) {
    var code   = ""
    var serial = ""
    if(type === "SERIAL") {
        console.log(elem.closest('input[class^="part"]'))
        serial = elem.value
    }

    ... Other erroneous code to perform the search
}

As you can see, here I use console.log(elem.closest('input[class^="part"]')) to find the closest component with the class of part, after reading jQuery documentation I believe this should work, but I get an undefined function error. I then tried to use the parent() selector and parentsUntil() selector but each of them threw an undefined function error.

If I console log, elem I get: 

<input type="text" class="serial" placeholder="SERIAL NUMBER">

Which is what I would expect, so I don't see why I can't use elem.parent().parent() to traverse to componentPair and then dive into the tree structure to pull the information out.

I am using jQuery 1.11.3, any help would be greatly appreciated.

Upvotes: 1

Views: 251

Answers (3)

Rory McCrossan
Rory McCrossan

Reputation: 337580

The issue is because .part is not a parent of .serial. You need to use closest() to find a common parent, then find() to get the element you require. Try this:

var serial = $(elem).closest('.componentPair').find('.part').val();

Upvotes: 3

Johan Karlsson
Johan Karlsson

Reputation: 6476

The reason you get undefined function error is that elem is not a jQuery object, it's a HTMLElement, so wrap it in $().

Then .closest() won't work the way you think, it will only search through itself and its parents.

Try this:

function getData(elem, type) {
    var code   = ""
    var serial = ""
    if(type === "SERIAL") {
        console.log($(elem).parent().siblings().find('input[class^="part"]'));
        serial = elem.value        
    }
}

$(document).on("keyup", '.serial', function() {getData(this, "SERIAL") });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="componentList">
    <div class="componentPair">
        <div class="left">
            <input type="text" class="part" placeholder="PART NUMBER">
        </div>
        <div class="right">
            <input type="text" class="serial" placeholder="SERIAL NUMBER">
        </div>
    </div>
</div>

Upvotes: 1

Bhavin Solanki
Bhavin Solanki

Reputation: 4818

You have issue with elem.closest('input[class^="part"]'), this should be $(elem).closest('input[class^="part"]') . Because elem is the input's object itself. so you can not directly call closest()

Here is the working code :

$(document).on("keyup", '.serial', function() { getData(this, "SERIAL") });
function getData(elem, type) {
    var code   = ""
    var serial = ""
    if(type === "SERIAL") {
        console.log($(elem).parent().parent().find('.part'));
        serial = $(elem).parent().parent().find('.part').val();
      alert(serial);
    }

   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="componentList">
    <div class="componentPair">
        <div class="left">
            <input type="text" class="part" placeholder="PART NUMBER">
        </div>
        <div class="right">
            <input type="text" class="serial" placeholder="SERIAL NUMBER">
        </div>
    </div>
</div>

Upvotes: 0

Related Questions