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'");
onclick
de las etiquetas para no duplicar y evitar conflictos. Por cierto, agrega elvalue
a cada checkbox para obtener el dato correcto y evitar usar otros métodos.