Comment obtenir la valeur de l'entrée onclick avec jQuery

Comment je peux obtenir la valeur à partir de la ligne que je clique?

Voici un petit exemple:

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

Quand je clique sur l'img, je veux obtenir la valeur de caché d'entrée (id="repairID_X). J'ai essayé plusieurs options, mais je ne pouvais pas faire ce que je veux, je serai heureux si quelqu'un l'aide. Merci.

InformationsquelleAutor diank | 2015-07-22
  1. 3

    Puisque vous avez deux enfants divs dans chaque ligne, chaque élément d'entrée repairID_ alors vous voulez joindre l'écouteur d'événement pour l'enfant divs ou les images:

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

    DÉMO

    Ou à l'aide de l'image:

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

    DÉMO

    Si vous voulez juste les valeurs de l'caché par deux entrées, indépendamment de ce que l'image a été cliqué utiliser ceci:

    $('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"
});

    DÉMO

    InformationsquelleAutor PeterKA
  2. 2

    Si vous avez besoin de la valeur, l'entrée est redondante. Pourquoi ne pas utiliser de données* attributs HTML5?

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

    Ensuite, vous pouvez lier l'événement click directement à l'image.

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

    De cette façon, vous pouvez passer autant d'info que vous voulez grâce à des étiquettes de données.

    InformationsquelleAutor pokkanome
  3. 2

    Vous devez trouver un moyen de lier l'image à l'entrée. C'est la façon dont je le ferais :

    Ajouter une classe à votre img, donc il est plus facile de sélectionner avec jquery (comme "cliquables" ou quelque chose), et un attribut de données référençant l'id d'entrée donc ça va ressembler à ça :

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

    Puis, dans votre javascript :

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

    L'avantage est qu'il fonctionne même si vous changez la disposition des éléments dans le DOM, car les images sont liées aux entrées via l'attribut de données.

    Edit : pokkanome la solution est plus intelligent.

    InformationsquelleAutor Dorian
  4. 1

    Utilisation find() et le contient(*) sélecteur 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>

    • Oui, il fonctionne, mais si je clique sur une autre ligne sera de retour 2 à nouveau.
    • voir ma réponse mis à jour
    • peut-être que je suis malentendus. Dont vous voulez obtenir le caché déposé avec un id qui contient repairID?
    • Presque fonctionne, le problème est que lorsque vous cliquez sur la ligne on affiche la valeur de la ligne 2.
    • essayez ma mise à jour de réponse
    • Cela n'a pas fonctionné.
    • vérifier l'extrait de code dans ma mise à jour de réponse. Il y travaille

    InformationsquelleAutor AmmarCSE