0

Soy algo nueva programando, como puedo enviar 2 valores de input y un arreglo de checkbox por Ajax para hacer una modificación en la base de datos, los checkbox tienen los ids y los input tienen los datos para modificar.

Arreglo de checkbox:

<td>
    <input type="checkbox" class="custom-control-input" id="pagos" name="pago[]" value="<?php echo $ver[0] ?>"/>
</td>

Modal donde están los input:

<div class="modal fade" id="modalPagar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" float-right><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Pagar cuentas</h4>
        </div>
        <div class="modal-body">
            <label>Fecha de Pago</label>
            <input type="text" name="" id="fechap" class="form-control input-sm">
            <label>Numero de cheque</label>
            <input type="text" name="" id="cheque" class="form-control input-sm">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-warning" data-dismiss="modal" id="pagar">
                Pagar
            </button>
        </div>
    </div>
</div>

2
  • Deberías revisar el uso de AJAX en Javascript o Jquery. Existen muchos tutoriales que te pueden ayudar, incluido la documentación oficial: api.jquery.com/jquery.ajax. Te sugiero que intentes programarlo y que si te surge algún problema publiques una pregunta más concreta y que haga referencia a un problema más puntual. Lo que pides requeriría de una respuesta demasiado amplia para los estándares del sitio Web.
    – phpMyGuel
    Commented el 4 abr. 2019 a las 10:07
  • Viendo que tienes un modal, te recomendaría que integres todo en el mismo DOM, es mejor desde el punto de vista de la experiencia del usuario y más fácil de recoger todos los datos para enviarlos al servidor por medio de Ajax. Sobre el uso de Ajax aquí hay varias preguntas/respuestas que explican cómo hacerlo. Sugiero que mires en la lista de preguntas y veas si hay alguna que te puede servir al menos para empezar. Luego ensayas un código y si tienes problemas los planteas aquí.
    – A. Cedano
    Commented el 4 abr. 2019 a las 10:23

1 respuesta 1

0

Saludos como estas usando Jquery es mas facil lo puedes hacer algo así:

function grabarDatos(){
	 //obtengo los checkbox
  var seleccionados = []
  $("input[name='options[]']:checked").each(function ()
  {
      seleccionados.push(parseInt($(this).val()));
  });
  //valido que seleccione una opcion minimo
  if(seleccionados.length == 0){
  	alert('Seleccione una opcion');
  	return false;
  }
  //valido que escoja la fecha
	fecha = $("#exampleModal #fechap").val();
  if(fecha == '' || fecha == null){
  	alert('Seleccione la fecha de pago.');
    return false;
  }
  //data para enviar por ajax
  data = {
  	checkboxs :seleccionados,
    fecha:fecha
  }
  console.log(data);
}//end function grabarDatos
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    
    <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
 Abrir Modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <input type="checkbox" name="options[]" value="1" />op1 <br>
<input type="checkbox" name="options[]" value="2" />op1 <br>
<input type="checkbox" name="options[]" value="3" />op2 <br>
<input type="checkbox" name="options[]" value="4" />op3 <br>
<input type="checkbox" name="options[]" value="5" />op4 <br>
        <label>Fecha de Pago</label>
            <input type="date" name="" id="fechap" class="form-control input-sm">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="grabarDatos();">Grabar Datos</button>
      </div>
    </div>
  </div>
</div>
    
    

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Si te fijas en el boton grabar mando a llamar una función grabarDatos la misma es encargada de recoger los checkbox y los datos necesarios para posteriormente armar la data y esta la enviarias por ajax segun lo que necesites.

1
  • Muchas gracias, me funciono de maravilla. Commented el 5 abr. 2019 a las 6:39

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.