如何使用jQuery从输入中获取值

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.

当我点击img时,我想得到隐藏输入的值(id =“repairID_X)。我尝试了几个选项,但我不能做我想要的,如果有人帮忙我会很高兴。谢谢。

4 个解决方案

#1

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:

由于每行中有两个子div,每个div都带有输入元素repairID_,因此您希望将事件监听器附加到子div或图像:

$('.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

#2

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

如果您需要的只是值,则隐藏的输入是多余的。为什么不在HTML5中使用data- *属性?

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

然后,您可以将click事件直接绑定到图像。

$('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.

这样,您可以通过数据标记传递尽可能多的信息。

#3

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 :

在你的img中添加一个类,这样就可以更容易地用jquery选择(比如“clickable”或者什么),以及一个引用输入id的数据属性,所以它看起来像这样:

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

Then, in your javascript :

然后,在您的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.

优点是,即使您更改DOM中元素的配置,它也会起作用,因为图像通过data属性绑定到输入。

Edit : pokkanome's solution is smarter.

编辑:pokkanome的解决方案更聪明。

#4

Use find() and the contains(*) selector

使用find()和contains(*)选择器

$('.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>