fijate que ya elimino el php
<body>
<?php
include 'navbar.php'
?>
<div class="container bg-white mt-3">
<div class="content row vh-10 justify-content-center align-items-center">
<h1 class="text-center">Crear Nueva Sucursal</h1>
<div class="col-auto">
<form autocomplete="false">
<label class="d-flex justify-content-center align-items-center" for="Nombre">Sucursal:
<input class="form-control" type="text" name="Sucursal" id="sucursal"
placeholder="Escribe la nueva Sucursal" required>
<input class="btn btn-dark btn-md mb-3 mt-3 " style="margin-left: 15px;" type="button"
value="Agregar Sucursal" id="Agregar_sucursal">
</label>
</form>
</div>
</div>
</div>
<div class="container bg-white mt-3">
<h2 class="text-center">Sucursales Existentes</h2>
<div class="content">
<table style="margin:auto; width:55%; margin-bottom: 5vw;"
class="table table-hover table-bordered bg-light text-black">
<thead>
<th style="font-size: 23px;">Nombre</th>
<th style="margin:auto; width:12%; font-size: 23px;">Acciones</th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<script>
const pag = 'crud.php'; //ruta pagina php crud o consulta
//al terminar de cargar
document.addEventListener('DOMContentLoaded', function() {
PintaTabla(); //dibujo la tabla
});
// al hacer click en el boton Agregar_sucursal
Agregar_sucursal.addEventListener('click', (e) => {
e.preventDefault(); //detengo el envio del form
FetchAsynAwait(pag, {
'sucursal': sucursal.value
}, 'text').then((ret) => { //envio por fetch
sucursal.value = '';
if (ret == 'ok') {
PintaTabla(); //si todo sale bien actualizo la tabla
} else {
alert(ret); //algo salio mal
}
})
});
// fincion para eliminar una sucursal
const borra = (e) => {
FetchAsynAwait(pag, {
'borra': e
}, 'text').then((ret) => {
console.log(ret);
});
}
// funcion que me dibuja la tabla
const PintaTabla = () => {
FetchAsynAwait(pag, {
'consulta': true
}).then((ret) => {
let tbody = '';
for (let i = 0; i < ret.length; i++) {
tbody += `
<tr style="background:white;">
<td style="font-size: 20px;">${ret[i].NOMBRE_SUCURSAL}</td>
<td class="d-flex justify-content-center">
<span onclick="borra(${ret[i].ID_SUCURSAL});" role="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></a></td>
<tr>
`;
}
document.querySelector('tbody').innerHTML = tbody;
});
}
// funcion async fetch
const FetchAsynAwait = async (pag, dataJson, r = 'json') => {
const opciones = {
method: 'POST',
cache: 'no-cache',
body: JSON.stringify(dataJson),
headers: {
'Content-Type': 'application/json'
}
};
try {
const fetchResp = await fetch(pag, opciones);
const retorna = await r === 'json' ? fetchResp.json() : fetchResp.text();
return retorna;
} catch (e) {
return e;
}
}
</script>
Para el archivo que ejecuta el php, yo le llame crud.php tu puedes cambiarlo pero recuerda comentarlo en el JavaScript en la const pag
<?php
include 'model/conexion.php';
$json = json_decode(file_get_contents('php://input'), true);
if (!empty($json['sucursal'])) {
$nombre = $json['sucursal'];
$consulta = $con->prepare("INSERT INTO sucursal(NOMBRE_SUCURSAL)
VALUES(?);");
$result = $consulta->execute([$nombre]);
if ($result == true) {
echo "ok";
} else {
echo "no se pudo agregar el contacto";
}
}
if (!empty($json['consulta'])) {
$consulta = $con->query("SELECT * FROM sucursal;");
echo json_encode($consulta->fetchAll(PDO::FETCH_OBJ),true);
}
if (!empty($json['borra'])) {
echo $json['borra']; // este es el ID_SUCURSAL
// Aca tu consulta de borrar
}
Te escribí el JavaScript comentado para que logres entender como funciona, espero haberte ayudado.