1

Teniendo la siguiente tabla HTML

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<table class="table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="miCheck">
        </div>
      </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="miCheck">
        </div>
      </td>
    </tr>
  </tbody>
</table>

Necesito que al cambiar el valor del swith a checked se haga un llamado a una función con AJAX y este pase los datos a un documento PHP. Pero no logro que el resultado sea Done

Por lo tanto hago lo siguiente:

$(document).ready(function() {
  $(".form-check-input").on('change', function postinput() {
    var matchvalue = $(this).val(); // this.value
    $.ajax({
      url: 'validar.php',
      data: {
        matchvalue: matchvalue
      },
      type: 'post'
    }).done(function(responseData) {
      console.log('Done: ', responseData);
    }).fail(function() {
      console.log('Failed');
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<table class="table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" name="miswitch" onchange="postinput()">
        </div>
      </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" name="miswitch" onchange="postinput()">
        </div>
      </td>
    </tr>
  </tbody>
</table>

Como pueden ver siempre me retorna Failed en consola

El archivo validar.php es tan sencillo como

$entry = $_POST['matchvalue'];
$conn->query("UPDATE matches SET grp = '$entry' WHERE mid = 'm1'");
4
  • Que dato necesitas capturar para enviar en la llamada? O sea que dato se depositaría en matchvalue al cambiar al quedar en checked? Commented el 16 dic. 2021 a las 0:04
  • En Javascript estás asignando un evento, elimina el onclick de las etiquetas para no duplicar y evitar conflictos. Por cierto, agrega el value a cada checkbox para obtener el dato correcto y evitar usar otros métodos.
    – Triby
    Commented el 16 dic. 2021 a las 0:40
  • @LuisS.Romero necesito recibir el ID, con eso me bastaría
    – Alvamon6
    Commented el 16 dic. 2021 a las 1:21
  • @Triby me disculpo, no logro entender lo que me recomiendas :/ sorry
    – Alvamon6
    Commented el 16 dic. 2021 a las 1:26

1 respuesta 1

2

Este código captura los datos nombre y apellido de la tabla, solo de una la fila chequeada, luego los envía en la llamada Ajax.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td id="name1">Mark</td>
          <td id="lastname1">Otto</td>
          <td>
            <div class="form-check form-switch">
              <input
                class="form-check-input"
                type="checkbox"
                role="switch"
                name="miswitch"
                id="1"
                onchange="postInput(event)"
              />
            </div>
          </td>
        </tr>
        <tr id="fila2">
          <th scope="row">2</th>
          <td id="name2">Jacob</td>
          <td id="lastname2">Thornton</td>
          <td>
            <div class="form-check form-switch">
              <input
                class="form-check-input"
                type="checkbox"
                role="switch"
                name="miswitch"
                id="2"
                onchange="postInput(event)"
              />
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <script>
      function postInput(event) {
        let nombre = document.getElementById(
          "name" + event.target.id
        ).innerHTML;
        let apellido = document.getElementById(
          "lastname" + event.target.id
        ).innerHTML;
        const matchvalue = nombre + " " + apellido;
        if (event.target.checked) {
          $.ajax({
            type: "POST",
            url: "validar.php",
            data: { matchvalue: matchvalue },
            success: function (responseData) {
              console.log("Done: ", responseData);
            },
          });
        }
      }
    </script>
  </body>
</html>
2
  • Gracias por responder, y si quiero que el resultado se vea en el mismo documento donde tengo el formulario? PD: ya es un archivo con extension php
    – Alvamon6
    Commented el 16 dic. 2021 a las 1:20
  • De nada, siempre es importante que en cada pregunta seas bien específico, des ejemplos, por ejemplo en este caso: Me gustaria que aparezca tal dato y tal otro que vienen de tal lado, quiero que se muestre de tal forma en tal lugar. La información nunca está de más y nos hará más fácil todo a todas las partes... Gracias Commented el 16 dic. 2021 a las 1:27

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.