I'm trying to send data from a form with JS to PHP through Ajax but I can not get it sent.
This is the code of a separate sheet of JS
function objetoAjax() {
var xmlhttp = false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function Registrar() {
ID = document.frmMascotas.ID.value;
Nombre = document.frmMascotas.Nombre.value;
Fecha = document.frmMascotas.Fecha.value;
Raza = document.frmMascotas.Raza.value;
Especie = document.frmMascotas.Especie.value;
// alert("Datos "+ID+" "+Nombre+" "+Fecha+" "+Raza+" "+Especie);
ajax = objetoAjax();
ajax.open("POST", "Registrar.php", true);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
alert('Los datos se guardaron con exito');
window.location.reload(true);
}
}
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("ID=" + ID + "Nombre=" + Nombre + "Fecha=" + Fecha + "Raza=" + Raza + "Especie="
Especie);
}
Aquí está el codigo HTML<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title>CRUD Mascotas</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<div class="container">
<div align="center" class="starter-template">
<h1 align="center"><b>CRUD CON AJAX</b></h1>
<button type="button" id="btnmodal" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>Nuevo
</button>
</div>
<div class="panel panel-default">
<div class="panel-heading">Lista de mascotas</div>
<table class="table">
<thead>
<tr>
<th>ID Mascota</th>
<th>Nombre</th>
<th>Fecha De Nacimiento</th>
<th>Raza</th>
<th>Especie</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<?php
$conexion = mysqli_connect("localhost","root","","crud-ajax");
$resultado = mysqli_query($conexion,"SELECT * FROM MASCOTA");
while($filas=mysqli_fetch_array($resultado))
{ ?>
<tr>
<td>
<?php echo $filas['idmascota']; ?>
</td>
<td>
<?php echo $filas['nombre']; ?>
</td>
<td>
<?php echo $filas['fechanacimiento']; ?>
</td>
<td>
<?php echo $filas['raza']; ?>
</td>
<td>
<?php echo $filas['especie']; ?>
</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-danger">Seleccione</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a>Eliminar</a></li>
<li><a>Actualizar</a></li>
</ul>
</div>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Registrar Mascota</h4>
</div>
<form role="form" action="" name="frmMascotas" onsubmit="Registrar(); return false">
<div class="col-lg-12">
<div class="form-group">
<label>ID Mascota</label>
<input name="ID" class="form-control" required>
</div>
<div class="form-group">
<label>Nombre</label>
<input name="Nombre" class="form-control" required>
</div>
<div class="form-group">
<label>Fecha De Nacimiento</label>
<input name="Fecha" type="date" class="form-control" required>
</div>
<div class="form-group">
<label>Raza</label>
<input name="Raza" class="form-control" required>
</div>
<div class="form-group">
<label>Especie</label>
<input name="Especie" class="form-control" required>
</div>
<button type="submit" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Registrar
</button>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-circle" data-dismiss="modal"><i class="fa fa-times"></i>x</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnmodal').click(function() {
$('#modal').modal('show');
});
});
</script>
</body>
</html>Here is the PHP code Sheet Registrar.php
<?php
require('Conexion.php');
$IDmascotas = $_POST['ID'];
$Nombre = $_POST['Nombre'];
$Fecha = $_POST['Fecha'];
$Raza = $_POST['Raza'];
$Especie = $_POST['Especie'];
$Query = "INSERT INTO mascota (idmascota,nombre,fechanacimiento,raza,especie)
VALUES ('$IDmascotas','$Nombre','$Fecha','$Raza','$Especie')";
$Reg = mysqli_query($conexion,$Query);
mysqli_close($conexion);
?>
Hoja Conexion.php
<? php
$conexion = mysqli_connect("localhost","root","","crud-ajax");
?>