I want to know how to get value from specific input text field. There are many text field with same name and same class with different values and each input have 1 button. How can i get the value from each one of the fields by clicking on each specific button. Using with Javascript or Jquery? Please guide me.

<input type="hidden" name="myvalue" class="form-control input_text" value="aaa"/>
    <input type="button" class="clickme" value="Get Value" />

    <input type="hidden" name="myvalue" class="form-control input_text" value="bbb"/>
    <input type="button" class="clickme" value="Get Value" />

    <input type="hidden" name="myvalue" class="form-control input_text" value="ccc"/>
    <input type="button" class="clickme" value="Get Value" />


    <input type="hidden" name="myvalue" class="form-control input_text" value="ddd"/>
    <input type="button" class="clickme" value="Get Value" />

    <input type="hidden" name="myvalue" class="form-control input_text" value="eee"/>
    <input type="button" class="clickme" value="Get Value" />

I want to know how to get value from specific input text field. There are many text field with same name and same class with different values and each input have 1 button. How can i get the value from each one of the fields by clicking on each specific button. Using with Javascript or Jquery? Please guide me.

<input type="hidden" name="myvalue" class="form-control input_text" value="aaa"/>
    <input type="button" class="clickme" value="Get Value" />

    <input type="hidden" name="myvalue" class="form-control input_text" value="bbb"/>
    <input type="button" class="clickme" value="Get Value" />

    <input type="hidden" name="myvalue" class="form-control input_text" value="ccc"/>
    <input type="button" class="clickme" value="Get Value" />


    <input type="hidden" name="myvalue" class="form-control input_text" value="ddd"/>
    <input type="button" class="clickme" value="Get Value" />

    <input type="hidden" name="myvalue" class="form-control input_text" value="eee"/>
    <input type="button" class="clickme" value="Get Value" />

• javascript
• jquery
• html

4 Answers 4

$('.clickme').click(function() {

  alert($(this).prev().val())
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" name="myvalue" class="form-control input_text" value="aaa" />
<input type="button" class="clickme" value="Get Value" />

<input type="hidden" name="myvalue" class="form-control input_text" value="bbb" />
<input type="button" class="clickme" value="Get Value" />

<input type="hidden" name="myvalue" class="form-control input_text" value="ccc" />
<input type="button" class="clickme" value="Get Value" />


<input type="hidden" name="myvalue" class="form-control input_text" value="ddd" />
<input type="button" class="clickme" value="Get Value" />

<input type="hidden" name="myvalue" class="form-control input_text" value="eee" />
<input type="button" class="clickme" value="Get Value" />

1. On click of button use this context to get the button clicked.
2. Use .prev() to get the previous element which is the input.
3. Use .val() to get the value.

1. try to encapsulate the buttons and inputs with a div
2. from the button event get this (the button)
3. with $(this).closest('div') get to parent and get the next input from there.

$(document).ready(function() {
  $('.clickme').click(function() {
    var div = $(this).closest('div');
    alert(div.find('input').val());
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="hidden" name="myvalue" class="form-control input_text" value="aaa"/>
<input type="button" class="clickme" value="Get Value" />
</div>
<div>
<input type="hidden" name="myvalue" class="form-control input_text" value="bbb"/>
<input type="button" class="clickme" value="Get Value" />
</div>
<div>
<input type="hidden" name="myvalue" class="form-control input_text" value="ccc"/>
<input type="button" class="clickme" value="Get Value" />
</div>
<div>
<input type="hidden" name="myvalue" class="form-control input_text" value="ddd"/>
<input type="button" class="clickme" value="Get Value" />
</div>
<div>
<input type="hidden" name="myvalue" class="form-control input_text" value="eee"/>
<input type="button" class="clickme" value="Get Value" />
</div>

Try this

$(document).ready(function () {
 $("input.clickme").click(function () {
   alert($(this).prev('input[name=myvalue]').val());
 });
});

this will be current clicked button and prev('input') will select above input element. see below code.

$(document).ready(function () {
       $(".clickme").on('click',function(){
         alert($(this).prev('input').val());
       });
    });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" name="myvalue" class="form-control input_text" value="aaa"/>
    <input type="button" class="clickme" value="Get Value" />

    <input type="hidden" name="myvalue" class="form-control input_text" value="bbb"/>
    <input type="button" class="clickme" value="Get Value" />

    <input type="hidden" name="myvalue" class="form-control input_text" value="ccc"/>
    <input type="button" class="clickme" value="Get Value" />


    <input type="hidden" name="myvalue" class="form-control input_text" value="ddd"/>
    <input type="button" class="clickme" value="Get Value" />

    <input type="hidden" name="myvalue" class="form-control input_text" value="eee"/>
    <input type="button" class="clickme" value="Get Value" />