Cómo obtener el valor de la entrada onclick con jQuery

¿Cómo puedo obtener el valor de la fila que yo haga clic en?

He aquí un pequeño ejemplo:

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

Cuando hago clic en la img, quiero obtener el valor de entrada oculto (id=»repairID_X). He intentado varias opciones, pero yo no podía hacer lo que quiero, voy a ser feliz si alguien de ayuda. Gracias.

InformationsquelleAutor diank | 2015-07-22

4 Kommentare

  1. 3

    Ya que tiene dos hijo divs en cada fila, cada uno con su elemento de entrada repairID_, a continuación, desea conectar el detector de eventos para el niño divs o las imágenes:

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

    DEMO

    O el uso de la imagen:

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

    DEMO

    Si sólo desea los valores de los dos oculta entradas, independientemente de lo que la imagen se hizo uso de este:

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

    Si todo lo que usted necesita es el valor de la entrada oculto es redundante. ¿Por qué no utilizar de datos* atributos con HTML5?

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

    A continuación, puede enlazar el evento click directamente a la imagen.

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

    De esta manera usted puede pasar a lo largo de toda la información que desee a través de etiquetas de datos.

  3. 2

    Se necesita alguna manera de vincular la imagen con la entrada. Esto es lo que yo haría :

    Agregar una clase a tu img para que sea más fácil para seleccionar con jquery (como «hacer clic» o algo), y un atributo de datos hace referencia a la entrada de id así que voy a tener el siguiente aspecto :

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

    A continuación, en el javascript :

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

    La ventaja es que va a trabajar incluso si cambia la disposición de los elementos en el DOM debido a que las imágenes están vinculadas a las entradas a través de los datos de atributo.

    Edición : pokkanome la solución es más inteligente.

  4. 1

    Uso find() y la contiene(*) selector de

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

    JS:

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

    HTML:

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

    • Sí funciona, pero si hago clic en otra fila devolverá 2 de nuevo.
    • ver mi respuesta actualizada
    • tal vez estoy misunderstading. Usted no desea conseguir el oculto presentó con un id que contiene repairID?
    • Casi funciona, el problema es que cuando haga clic en la primera fila muestra el valor de la fila 2.
    • mi respuesta actualizada
    • compruebe el fragmento de código en mi respuesta actualizada. Se está trabajando allí

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea