CODEWITHSUNDEEP
javascriptjqueryhtml
Kyaw Zin Wai
Kyaw Zin Wai

Reputation: 459

How to get only one value from multiple input text field with same name?

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" />

Upvotes: 0

Views: 4170

Answers (4)

Nils
Nils

Reputation: 969

  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.com/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>

Upvotes: 2

Bharat
Bharat

Reputation: 2464

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.com/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" />

Upvotes: 1

Mairaj Ahmad
Mairaj Ahmad

Reputation: 14604

Try this

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

Upvotes: 1

guradio
guradio

Reputation: 15555

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

  alert($(this).prev().val())
})
<script src="https://ajax.googleapis.com/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.

Upvotes: 4

Related Questions