CODEWITHSUNDEEP
javascriptjquery
Saad Bashir
Saad Bashir

Reputation: 4519

jQuery Get Value of Input Field in the next Div Nest

I am trying to get value of the input field nested in the next div with class 'fullaccountcode' but it keeps on returning empty when I alert the result.

HTML:

<div class="row">
                    <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 fullaccountcode">
                        <input type=text name=mcode[] id=mcode placeholder="34" class="form-control">
          </div>
                    <div class="col-xs-1 show-slash">
                        <span>/</span>
                    </div>
                    <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 fullaccountcode">
                        <input type=text name=ccode[] id=ccode placeholder="01" class="form-control" value="yello">
                    </div>
                    <div class="col-xs-1 show-slash">
                        <span>/</span>
                    </div>
                    <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 fullaccountcode">
                        <input type=text name=sacode[] id=sacode placeholder="0016" class="form-control">
                    </div>
                </div>

JS:

$(document).on("keyup","#mcode",function() {
  alert($(this).closest('div').nextAll('.fullaccountcode').eq(0).val());
});

JSFiddle Demo

Upvotes: 0

Views: 1018

Answers (2)

Niklesh Raut
Niklesh Raut

Reputation: 34914

You can use $(this).parent().next().next().find("input").val()

$(document).on("keyup","#mcode",function() {
  	console.log($(this).parent().next().next().find("input").val());
    alert($(this).parent().next().next().find("input").val());
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
						<div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 fullaccountcode">
							<input type=text name=mcode[] id=mcode placeholder="34" class="form-control">
              </div>
						<div class="col-xs-1 show-slash">
							<span>/</span>
						</div>
						<div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 fullaccountcode">
							<input type=text name=ccode[] id=ccode placeholder="01" class="form-control" value="yello">
						</div>
						<div class="col-xs-1 show-slash">
							<span>/</span>
						</div>
						<div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 fullaccountcode">
							<input type=text name=sacode[] id=sacode placeholder="0016" class="form-control">
						</div>
					</div>

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

There are 2 issues in your code:

1) you are targeting div and not the input element in it. Use .find('input') after getting the target div element.

2 ) Also eq selector targets the element based on zero index. You should use :eq(0) or .first() to target first element in matched set:

$(document).on("keyup","#mcode",function() {
  alert($(this).closest('div').nextAll(".fullaccountcode").eq(0).find('input').val());
});

Working Demo

Upvotes: 1

Related Questions