0

Teniendo esto:

introducir la descripción de la imagen aquí

Necesito que los select box Centro Costo, esten disabled y que se activen solo cuando el checkbox de su sea clickeado independiente de que el usuario elija o no una opcion al habilitarse el select box.

<form method="post" id="form">
 <table id="listado" class="table table-hover table-bordered table-condensed">
  <thead>
   <tr>
    <th><i class="fa fa-check"></i>&nbsp;SEL</th>
     <th>N° SOL</th>
     <th>FOLIO</th>
     <th>PRODUCTO</th>
     <th>CANT.</th>
     <th>CENTRO COSTO</th>
     <th>AUTORIZADO POR</th>
     <th>F. SOLICITUD</th>
     <th>F. AUTORIZACION</th>
     <th>ESTADO INTERNO</th>
     <th>ESTADO GENERAL</th>
    </tr>
   </thead>
   <tbody>
    <?php
     $conexion->set_charset("utf8");
     $consulta = "SELECT

      sm.id AS id_sol,
      sm.correlativo,
      sm.ids,
      sb.id AS id_sb,
      tr.nombre AS autorizado_por,
      sb.fecha_sol,
      sm.fecha_autorizacion,
      sm.producto,
      sm.cantidad,
      sb.estado

      FROM sol_maestranza sm

      INNER JOIN trabajadores tr ON tr.id = sm.autorizado_por
      LEFT JOIN salida_bodega sb ON sb.id = sm.ids

      WHERE sb.id_cl = '$id_cl' AND sb.estado = 'E' AND sm.estado_sol = 'S';
      $resultado = $conexion->query($consulta);
      if ($resultado->num_rows > 0){
       while ($row = $resultado->fetch_array()) {
        if($row['estado'] == 'E'){
         $est_int = "APROBADO";
        }else{
         $est_int = 'EN ESPERA';
        }
       ?>
       <tr>
        <td align="center"><input type="checkbox" name="sel[]" class="flat-red" value="<?=$row['id_sol']?>" ></td>
        <td><?=$row['ids']?></td>
        <td><?=$row['correlativo']; ?></td>
        <td><?=strtoupper($row['producto'])?></td>
        <td><?=$row['cantidad']; ?></td>
        <td width="13%">
         <select class="form-control" style="margin: 0 !important; padding: 0 !important; width:100%" name="cci[]" required >
          <option value='' selected='selected' disabled>SELECCIONE OPCION</option>
          <?php foreach (array_combine($id_c, $nom_c) as $val1 => $val2){?>
          <option value="<?=$val1?>"><?=strtoupper($val2)?></option>
          <?php } ?>
          </select>
          </td>
          <td><?=strtoupper($row['autorizado_por']) ?></td>
          <td><?=DateTime::createFromFormat('Y-m-d',$row['fecha_sol'])->format('d/m/Y')?></td>
          <td><?=DateTime::createFromFormat('Y-m-d',$row['fecha_sol'])->format('d/m/Y')?></td>
          <td><?=$est_int ?></td>
          <td><?=$est_int?></td>
         </tr>
        <?php } } ?>

       </tbody>
      </table>
      <div class="modal-footer">
      <h3 class="box-title"><a href="myModal" data-toggle="modal" class="btn btn-success" data-target="#finaliza">CREAR ORDEN DE COMPRA</a></h3>
       </div>

    </form>

El como los envio (A una ventana Modal):

$('#finaliza').on('show.bs.modal', function(e) {

var $modal = $(this);

$.ajax({
 cache: false,
 type: 'POST',
 url: 'finaliza_oc.php',
 data: {'sel': JSON.stringify($('[name="sel[]"]').serializeArray()), 'cci': JSON.stringify($('[name="cci[]"]').serializeArray())
},
success: function(data) {
 $modal.find('.edit-content').html(data);
}
});
})

Y los recibo y proceso asi:

$obj = json_decode($_POST["sel"],true);
//PARA LOS IDS DE LOS CHEXKBOX SELECCIONADOS
foreach ($obj as $k){
 echo $k['value']; echo "<br>";
}

//PARA LOS SELECT BOX SELECCIONADOS
$obj = json_decode($_POST["cci"],true);

foreach ($obj as $k){
 echo $k['value']; echo "<br>";
}

Agradezco cualquier ayuda u orientacion al respecto. Saludos.

4
  • ¿Cómo estás recibiendo los valores en finaliza_oc.php? Por otra parte, el select para centro de costo no tiene nombre ni lo estás agregando en la petición AJAX.
    – Triby
    Commented el 17 jul. 2020 a las 17:21
  • Hola. creo que no se están asignando correctamente los nombres a los inputs en la línea <td align="center"><input type="checkbox" name="sel[]" class="flat-red" value="<?=$row['id_sol']?>" prueba a incluir los ids dentro del atributo name así: name="sel[<?=$row['id_sol']?>]". Adicionalmente debe haber nombres calificados para los elementos select que van a enviar datos.
    – quevedo
    Commented el 17 jul. 2020 a las 17:25
  • @quevedo gracias por responder. edite el problema en mi pregunta. mi problema son los select opcions, no los checkbox, ya que esos los puedo enviar y recibir de manera correcta.
    – Andres_Ha
    Commented el 17 jul. 2020 a las 17:34
  • En tu data: { ... } no hay referencia a los elementos select de modo que cabe esperar que no los estés enviando para ser procesados. Por esa razón pensé que tenías problema con los input.
    – quevedo
    Commented el 17 jul. 2020 a las 17:39

2 respuestas 2

0

Lo primero que debes saber es que cada item debe ter un id que se proporciona al desplegar los datos desde la consulta en php es decir algo como esto

<input  value="<?php echo $persona["id"];?>"  id="id-<?php echo $persona["id"];?>">

y el el ajax identificar al dar click ese id de esta forma

<script>
       $("#id-"+<?php echo $persona["id"];?>).click(function(e){
            e.preventDefault();
id = document.getElementById("id-"+<?php echo $persona["id"];?>).value//obtener valor del input o del select dinamico
                               
                                       var url = "enviar-id.php";
                                       $.ajax({
                                          type: "POST",
                                          url: url,
                                         
                                          data:{id:id},
                                          success: function(data)
                                 {
                                                                     
                                 var datos = (data);
                                                                
                                if (data == "ok") { }
                                                                            
                                if (data == "no") { } 
                                     
                              }
                           });

                               });
</script>

pero todo eso debe ir dentro del while para asi poder asignarle un id dinámico a la tabla

 while ($row = $resultado->fetch_array()) {
4
  • estimado, gracias por responder. Edite el problema real en mi pregunta. El problema son los select opcions. Solo me envia el valor del primer select. Los checkbox los puedo enviar y recibir correctamente. Saludos.
    – Andres_Ha
    Commented el 17 jul. 2020 a las 17:32
  • Como te mostre en la respuesta debe haber un id dinamico para poder identificarlo y enviarlo por ajax <select class="form-control" id="<?$row['id']?>" required>
    – juan perez
    Commented el 17 jul. 2020 a las 17:41
  • perfecto. hare los cambios y las pruebas. comento cualquier novedad. saludos
    – Andres_Ha
    Commented el 17 jul. 2020 a las 17:48
  • vale recuerda que para que los id de el select sea diferente de otro id debes darlo un identificador adicional es decir id="<?echo 'select'.$row['id']?>"
    – juan perez
    Commented el 17 jul. 2020 a las 17:55
0

En lugar de enviar los checkbox con JSON.stringify($('[name="sel[]"]').serializeArray() es necesario obtener todos los que están marcados e irlos agregando a un arreglo simple, solo con sus valores. Esto también servirá para buscar el valor de los select, asegurar que se seleccionó una opción y agregarlos también a su respectivo arreglo.

$('#finaliza').on('show.bs.modal', function(e) {
  // ¿Qué uso le das a estas dos variables?
  var $modal = $(this),
  idp = e.relatedTarget.id;

  // Inicializar arreglos para checkbox y select
  let ids = [];
  let sels = [];
  let incompleto = false;

  // Recorrer solo los checkbox marcados
  $('[name="sel[]"]:checked').each(function(i, chk) {
    // Agregar ID del checkbox
    ids.push($(chk).val());
    // Obtener valor del select:
    // -- A partir del checkbox obtener la fila
    // -- Desde la fila, buscar select por etiqueta (no tiene nombre)
    let value = parseInt($(chk).closest('tr').find('select').val());
    if(value) {
      // Agregar valor del select
      sels.push(value);
    } else {
      incompleto = true;
    }
  });
  console.log(ids, sels);
  if(incompleto) {
      // El select es requerido, no puede tener valor cero
      alert('Selecciona centro de costo para todas las filas marcadas');
      return false;
  }

  $.ajax({
    cache: false,
    type: 'POST',
    url: 'finaliza_oc.php',
    data: {
      'ids': JSON.stringify(ids),
      'sels': JSON.stringify(sels)
    },
    success: function(data) {
      $modal.find('.edit-content').html(data);
    }
  });
});

En PHP los recibirás en dos arreglos:

<?php
var_dump($_POST);
// ids => array(id1, id2, ... idX);
// sels => array(sel1, sel2, ... selX);

$("#probar").on('click', function() {
  // Inicializar arreglos para checkbox y select
  let ids = [];
  let sels = [];
  let incompleto = false;

  // Recorrer solo los checkbox marcados
  $('[name="sel[]"]:checked').each(function(i, chk) {
    // Agregar ID del checkbox
    ids.push($(chk).val());
    // Obtener valor del select:
    // -- A partir del checkbox obtener la fila
    // -- Desde la fila, buscar select por etiqueta (no tiene nombre)
    let value = parseInt($(chk).closest('tr').find('select').val());
    if(value) {
      // Agregar valor del select
      sels.push(value);
    } else {
      incompleto = true;
    }
  });
  console.log(ids, sels);
  if(incompleto) {
      // El select es requerido, no puede tener valor cero
      alert('Selecciona centro de costo para todas las filas marcadas');
      return false;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
      <tr>
        <td align="center"><input type="checkbox" name="sel[]" class="flat-red" value="1"></td>
        <td>1</td>
        <td>Producto 1</td>
        <td><select class="form-control" name="cci[]" required >
          <option value='' selected='selected' disabled>SELECCIONE OPCION</option>
          <option value="1">Centro 1</option>
          <option value="2">Centro 2</option>
        </select></td>
      </tr>
      <tr>
        <td align="center"><input type="checkbox" name="sel[]" class="flat-red" value="2"></td>
        <td>2</td>
        <td>Producto 2</td>
        <td><select class="form-control" name="cci[]" required >
          <option value='' selected='selected' disabled>SELECCIONE OPCION</option>
          <option value="1">Centro 1</option>
          <option value="2">Centro 2</option>
        </select></td>
      </tr>
      <tr>
        <td align="center"><input type="checkbox" name="sel[]" class="flat-red" value="3"></td>
        <td>3</td>
        <td>Producto 3</td>
        <td><select class="form-control" name="cci[]" required >
          <option value='' selected='selected' disabled>SELECCIONE OPCION</option>
          <option value="1">Centro 1</option>
          <option value="2">Centro 2</option>
        </select></td>
      </tr>
</table>
<button id="probar">Probar</button>

8
  • estimado, gracias por responder. Revisando tu respuesta, quiero preguntar algunas cosas. Los ids corresponden solo a un dato anexo (sin mayor importancia para el usuario). Siendo asi y para entender tu solucion, lo estas anexando solo para crear el array correspondiente? Ya que los valores que realmente necesito son sel[] y los centros de costo. Agradeceria me aclares esa duda por favor. Saludos y gracias
    – Andres_Ha
    Commented el 20 jul. 2020 a las 13:54
  • Haciendo algunas pruebas con tu respuesta, me da el suguiente error: Uncaught TypeError: $(...).value is not a function
    – Andres_Ha
    Commented el 20 jul. 2020 a las 13:59
  • estimado, si bien he logrado enviar los checkbox y los select, el codigo que me enviaste para la "validacion" de los select segun check seleccionado, no funciona. Activo 1 o 2 check y se envia igual sin hacer la validacion de los select (name="cci"). Que podria ser, ya que ahora que puedo enviar y recibir los datos, necesito validar que se seleccione el centro de costo segun chek seleccionado. Gracias por tu ayuda. Saludos.
    – Andres_Ha
    Commented el 20 jul. 2020 a las 20:58
  • Oka, lo hare y te comento.
    – Andres_Ha
    Commented el 20 jul. 2020 a las 21:03
  • Listo estimado, acabo de editar la pregunta. No puse el codigo que me enviaste para mostrar de forma limpia lo que tengo por ahora. Saludos y gracias.
    – Andres_Ha
    Commented el 20 jul. 2020 a las 22:13

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.