How to get value from input onclick with jQuery

Question

How I can get value from row that I click?

Here's a little example:

<div class="row" id="multiRows">
    <div>
        <div class="col-sm-5"><input id="DescRepair_0" name="dynfields[0][DescRepair]" class="form-control removeDiv" type="text"></div>
        <div class="col-sm-5"><input id="NestParts_0" name="dynfields[0][NestParts]" class="form-control removeDiv" type="text"></div>
        <div class="col-sm-1 removeDiv"><input id="EdPrice_0" name="dynfields[0][EdPrice]" class="form-control removeDiv" type="text"></div>
        <div class="col-sm-1 removeDiv"><input id="DateRepair_0" name="dynfields[0][DateRepair]" class="form-control dateBox removeDiv" type="text"></div>
        <input id="repairID_0" name="dynfields[0][repairID]" value="1" class="form-control removeDiv" type="hidden">
        <img class="removeRow removeImg removeDiv" src="img/remove.png" width="100%">
    </div>

    <div>
        <div class="col-sm-5"><input id="DescRepair_1" name="dynfields[1][DescRepair]" class="form-control removeDiv" type="text"></div>
        <div class="col-sm-5"><input id="NestParts_1" name="dynfields[1][NestParts]" class="form-control removeDiv" type="text"></div>
        <div class="col-sm-1 removeDiv"><input id="EdPrice_1" name="dynfields[1][EdPrice]" class="form-control removeDiv" type="text"></div>
        <div class="col-sm-1 removeDiv"><input id="DateRepair_1" name="dynfields[1][DateRepair]" class="form-control dateBox removeDiv" type="text"></div>
        <input id="repairID_1" name="dynfields[1][repairID]" value="2" class="form-control removeDiv" type="hidden">
        <img class="removeRow removeImg removeDiv" src="img/remove.png" width="100%"></div>
    </div>
</div>

When I click on the img, I want to get the value of hidden input (id="repairID_X). I tried several options, but I could not do what I want, I will be happy if someone help. Thanks.

PeterKA · Accepted Answer · 2015-07-22 16:52:52Z

4

Since you have two child divs in each row each with it's input element repairID_ then you want to attach the event listener to the child divs or the images:

$('.row > div').on('click', function() {
    var val = $('input[id^="repairID_"]', this).val();
});

DEMO

Or using the image:

$('.row img.removeRow').on('click', function() {
    var val = $(this).prev().val();
});

DEMO

If you just want the values of the two hidden inputs irrespective of what image was clicked use this:

$('img.removeRow').on('click', function() {
    var values = $(this).closest('.row').find(':hidden[id^="repairID_"]').map(function(i,v) {
        return this.value;
    }).get().join(','); //result: "1,2"
});

DEMO

edited Jul 22, 2015 at 16:52

answered Jul 22, 2015 at 16:37

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pokkanome · Accepted Answer · 2015-07-22 16:41:38Z

2

If all you need is the value, the hidden input is redundant. Why not use data-* attributes with HTML5?

<img class="removeRow removeImg removeDiv" src="img/remove.png" width="100%" data-repair="2">

Then you can bind the click event directly to the image.

$('img.removeRow').click(function () {
    var value = $(this).data('repair');
    // use value
});

This way you can pass along as much info as you want through data tags.

answered Jul 22, 2015 at 16:41

pokkanome

3471 silver badge9 bronze badges

Comments

Dorian · Accepted Answer · 2015-07-22 16:44:37Z

You need some way to link the image with the input. This is how I'd do it :

Add a class to your img so it's easier to select with jquery (like "clickable" or something), and a data attribute referencing the input id so it'll look like that :

<input id="repairID_X" […] type="hidden">
<img class="removeRow removeImg removeDiv clickable" data-input-id="repairID_X" […] >

Then, in your javascript :

$('.clickable').click(function() {
    var input_id = $(this).data('input-id');
    var input_value = $('#' + input_id).val();
});

The advantage is that it will work even if you change the disposition of the elements in the DOM because the images are tied to the inputs via the data attribute.

Edit : pokkanome's solution is smarter.

AmmarCSE · Accepted Answer · 2015-07-22 16:38:26Z

1

Use find() and the contains(*) selector

$('.row > div').click(function() {
      var theValue = $(this).find('[id*="repairID_"]').val();
    });

$('.row > div').click(function() {
  var theValue = $(this).find('[id*="repairID_"]').val();
  console.log(theValue);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="row" id="multiRows">
  <div>
    <div class="col-sm-5">
      <input id="DescRepair_0" name="dynfields[0][DescRepair]" class="form-control removeDiv" type="text">
    </div>
    <div class="col-sm-5">
      <input id="NestParts_0" name="dynfields[0][NestParts]" class="form-control removeDiv" type="text">
    </div>
    <div class="col-sm-1 removeDiv">
      <input id="EdPrice_0" name="dynfields[0][EdPrice]" class="form-control removeDiv" type="text">
    </div>
    <div class="col-sm-1 removeDiv">
      <input id="DateRepair_0" name="dynfields[0][DateRepair]" class="form-control dateBox removeDiv" type="text">
    </div>
    <input id="repairID_0" name="dynfields[0][repairID]" value="1" class="form-control removeDiv" type="hidden">
    <img class="removeRow removeImg removeDiv" src="img/remove.png" width="100%">
  </div>

  <div>
    <div class="col-sm-5">
      <input id="DescRepair_1" name="dynfields[1][DescRepair]" class="form-control removeDiv" type="text">
    </div>
    <div class="col-sm-5">
      <input id="NestParts_1" name="dynfields[1][NestParts]" class="form-control removeDiv" type="text">
    </div>
    <div class="col-sm-1 removeDiv">
      <input id="EdPrice_1" name="dynfields[1][EdPrice]" class="form-control removeDiv" type="text">
    </div>
    <div class="col-sm-1 removeDiv">
      <input id="DateRepair_1" name="dynfields[1][DateRepair]" class="form-control dateBox removeDiv" type="text">
    </div>
    <input id="repairID_1" name="dynfields[1][repairID]" value="2" class="form-control removeDiv" type="hidden">
    <img class="removeRow removeImg removeDiv" src="img/remove.png" width="100%">
  </div>
</div>
</div>

edited Jul 22, 2015 at 16:38

answered Jul 22, 2015 at 16:21

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

4 Comments

diank Over a year ago

Yes it works, but if I click on another row will return 2 again.

AmmarCSE Over a year ago

@diank, perhaps I am misunderstading. Dont you want to get the hidden filed with an id that contains repairID?

diank Over a year ago

Almost works, the problem is that when click on row one displays the value of row 2.

AmmarCSE Over a year ago

@diank, check the code snippet in my updated answer. It is working there

Collectives™ on Stack Overflow

How to get value from input onclick with jQuery

4 Answers 4

Comments

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related