0

Explico brevemente mi problema:

Mi intención es que cada vez que selecciono el div, salga el tick de fontawesome marcado y que le pase por post solo ese id, resulta que me envía todos los id por post, pero yo solo quiero el seleccionado.

Gracias de antemano.

PHP

echo "<ul>";
while ($y=$bd->obtener_fila($rel_her,0)){
    $idy=$y['id'];
    $nom=mb_strtoupper(trim($y['nom']));
    $ref=mb_strtoupper(trim($y['referencia']));
    echo "<li>";
   echo "<a class='operari' title='$nom'>";
      echo "<div id='her$idy' class='her_list' value='$idy' name='$idy'>
    <input type='hidden' id='obs_her' name='obs_her' value='$idy'>
      <h1>$ref</h1>
      <label>$nom</label>
    </input>
      </div>";
      echo "</a>";
  echo "</li>";
}
echo "</div>";
echo "</ul>";

JAVASCRIPT

$(".her_list").click(function() {
  var x = $(this).attr("id");
  var idy = x.replace("panel", "");

  $("#"+idy).one("click", function () {
    var y = document.getElementById(idy);
    clic = 0;
    if (clic == 0 ){
      y.innerHTML += "<i class='fa fa-check present'><span class='visible'></i>";
    }else{
      console.log("Mas de un click");
    }
      });
});
4
  • Tendrías que usar un select ... option, o bien un input radio para ello.
    – A. Cedano
    Commented el 9 dic. 2021 a las 11:16
  • Pero es que quiero hacerlo clicando el div
    – Luis
    Commented el 9 dic. 2021 a las 11:30
  • Eso no importa. Al hacer click en el div puedes alcanzar el elemento que esté seleccionado... de eso se trata precisamente.
    – A. Cedano
    Commented el 9 dic. 2021 a las 11:38
  • I como se haria? puedes ponerme un ejemplo? gracias
    – Luis
    Commented el 9 dic. 2021 a las 11:56

1 respuesta 1

0

Lo propio sería usar un tipo de elemento que te permita selección única y escuchar el evento change de los elementos de esa clase.

Veamos un ejemplo con un select. Aquí la función se lanzará cada vez que cambies de option:

$(".her_list").change(function() {
  console.log($(this).val());
  /*Implementa aquí la lógica de tu código, 
  lo que quieras hacer con el valor seleccionado*/

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="her_list" name="select">
  <option value="-1" disabled selected>--Seleccione--</option>
  <option value="value1">Value 1</option>
  <option value="value2">Value 2</option>
  <option value="value3">Value 3</option>
</select>

Otro elemento de selección única son los inputs de tipo radio. Son más cómodos, si quieres una especie de panel de selección o cosas así.

Lo que da unicidad a este tipo de elementos es el name, o sea, sólo podrá seleccionarse uno entre todos los que tengan el mismo name.

En este caso, bastaría con escuchar el evento de click de cada uno de ellos.

$(".her_list").click(function() {
  var valor = $('input[type="radio"]:checked').val();
  console.log(valor);

  /*Implementa aquí la lógica de tu código,
  lo que quieras hacer con el valor seleccionado*/

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Select a maintenance drone:</p>

<div class="her_list">
  <input type="radio" id="huey" name="drone" value="huey">
  <label for="huey">Huey</label>

  <input type="radio" id="dewey" name="drone" value="dewey">
  <label for="dewey">Dewey</label>

  <input type="radio" id="louie" name="drone" value="louie">
  <label for="louie">Louie</label>
</div>

3
  • Pero mi problema es el siguiente yo saco de base de datos todos los datos con un solo input, i solo me deja seleccionar 1 y quiero seleccionar varios, por consiguiente como paso por POST esos datos ? Gracias
    – Luis
    Commented el 9 dic. 2021 a las 12:54
  • @Luis en la lectura de los datos que obtienes de la BD puedes crear el tipo de elemento que necesites (select, radio button, etc), luego en Javascript escuchas los cambios de esos elementos y pasas por POST el dato seleccionado (para eso puedes usar Ajax). Creo que tu problema más bien es no saber ensamblar todo eso, pero no es tan complicado. Por ejemplo, dentro del while que tienes en tu código PHP puedes ir construyendo cualquiera de los elementos sugeridos. Y la petición Ajax la lanzarías desde dentro de las funciones de escucha (donde a modo de ejemplo puse los console.log).
    – A. Cedano
    Commented el 9 dic. 2021 a las 12:58
  • Si cambio el tipo de input por radio me salen todos con un radio para seleccionar, el problema es que solo se queda con el valor del primero
    – Luis
    Commented el 9 dic. 2021 a las 16:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.