CODEWITHSUNDEEP
javascriptjquery
alaves
alaves

Reputation: 11

GetValue Nested Input JS

I have html:

<div class="Alaves">
<h4>Admin</h4>
<input type="hidden" value=1>
</div>
//...There I have 10 class="Alaves" with inputs

And I need if clicked show its value; But its not working.

And my JS:

$(document).ready(function () {
    $('.Alaves').click(function () {
        assert( this.getElementsByTagName('input').val);
    });
});

Upvotes: 1

Views: 52

Answers (6)

Miquel Al. Vicens
Miquel Al. Vicens

Reputation: 376

Snippeted solution:

$( function() {
  $( '.alaves' ).click( function() {
    assert( $( 'input:hidden', this ).val() );
  });
});

function assert( val ) {
  console.log( 'Input\'s value is: "' + val + '".' );
}
.alaves {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="alaves">
  <h4>Admin</h4>
  <input type="hidden" value="1">
</div>

I corrected some mistakes and bad practices.

Upvotes: 0

Hitesh Jangid
Hitesh Jangid

Reputation: 210

On click if you want to show its child text box value only then :

         $(document).ready(function () {
             $('.Alaves').click(function () {
             assert( $(this).find('input').first().val();
            });
         });

else for all input having same parent class "Alaves" @prasad answer can be follow

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281686

If you want to find the value of input you clicked you need to use value function as .val() and not .val. Also you should find the input element in the current clicked element using the find() method of jquery

$(function (){
    $('.Alaves').click(function (){
        console.log($(this).find('input').val());
        
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="Alaves">
<h4>Admin</h4>
<input type="hidden" value=1>
</div>
<div class="Alaves">
<h4>Admin</h4>
<input type="hidden" value=2>
</div>

<div class="Alaves">
<h4>Admin</h4>
<input type="hidden" value=3>
</div>
<div class="Alaves">
<h4>Admin</h4>
<input type="hidden" value=4>
</div>
<div class="Alaves">
<h4>Admin</h4>
<input type="hidden" value=5>
</div>

Upvotes: 0

prasanth
prasanth

Reputation: 22500

Get the value of input 

$(document).ready(function () {
        $('.Alaves').click(function () {
            assert($(this).children('input').val());
        });
    })

Upvotes: 0

Nitesh
Nitesh

Reputation: 1550

Use it as:

$(document).ready(function () {
    $('.Alaves').click(function () {
        assert( $(this).val());
        or
        alert($(this).val()); 
    });
});

Upvotes: 1

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94319

I'm guessing this is what you mean:

$(function (){
    $('.Alaves').click(function (){
        $("input", this).each(function(){
            assert(this.value);
        });
    });
});

Upvotes: 1

Related Questions