El propósito de este artículo es enviar los datos del formulario y las credenciales al backend de PHP usando AJAX en un documento HTML.
Enfoque: cree un formulario en un documento HTML con un botón de envío y asigne una identificación a ese botón. En el archivo JavaScript, agregue un detector de eventos al botón de envío del formulario, es decir, haga clic. Luego, la solicitud se realiza al archivo PHP usando jQuery Ajax.
Código HTML:
HTML
<!-- HTML Code -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<!-- jQuery Ajax CDN -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- JavaScript File -->
<script src="script.js"></script>
<!-- Internal CSS -->
<style>
.container {
margin: 35px 0px;
}
input,
textarea,
button {
display: block;
margin: 30px auto;
outline: none;
border: 2px solid black;
border-radius: 5px;
padding: 5px;
}
button {
cursor: pointer;
font-size: large;
font-weight: bolder;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Demo Form</h1>
<!-- Form -->
<form>
<input type="text" name="name"
id="name" placeholder=
"Enter your Name">
<input type="text" name="age"
id="age" placeholder=
"Enter your Age">
<textarea name="aaddress"
id="address" cols="30"
rows="10" placeholder=
"Enter your address">
</textarea>
<!-- Form Submit Button -->
<button type="submit"
id="submitBtn">
Submit
</button>
</form>
</div>
</body>
</html>
Código JavaScript: El siguiente es el código para el archivo “script.js”.
Javascript
// Form Submit Button DOM
let submitBtn = document.getElementById('submitBtn');
// Adding event listener to form submit button
submitBtn.addEventListener('click', (event) => {
// Preventing form to submit
event.preventDefault();
// Fetching Form data
let name = document.getElementById('name').value;
let age = document.getElementById('age').value;
let address = document.getElementById('address').value;
// jQuery Ajax Post Request
$.post('action.php', {
// Sending Form data
name : name,
age : age,
address : address
}, (response) => {
// Response from PHP back-end
console.log(response);
});
});
Código PHP: El siguiente es el código para el archivo “action.php”.
PHP
<?php
// Checking if post value is set
// by user or not
if(isset($_POST['name'])) {
// Getting the data of form in
// different variables
$name = $_POST['name'];
$age = $_POST['age'];
$address = $_POST['address'];
// Sending Response
echo "Success";
}
?>
Producción:
Publicación traducida automáticamente
Artículo escrito por asmitsirohi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA