Issue
Hello guys im trying to get form data t be able to use it on the server, im using nodejs with express and im trying to console.log the data from a form, when the form gets submitted it also redirects to another page via the html code.
Here is my app.js
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(express.static('files'));
app.use(bodyParser.urlencoded({ extended: false }));
app.get('/', (req, res)=> {
res.sendFile('views/index.html', {root: __dirname })
});
app.get('/mercancia', (req, res)=> {
res.sendFile('files/merch.html', {root: __dirname })
});
app.get('/datos', (req, res)=> {
res.sendFile('files/Direccion.html', {root: __dirname })
});
app.post('/submit_data', (req, res)=> {
const postBody = req.body;
console.log(postBody);
});
app.get('*', (req, res) => {
res.redirect('/')
});
app.listen(3000, console.log('App Listening to port 3000'));And here is my html form:
<!DOCTYPE html>
<html>
<head>
<title>direccion</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" type = "text/css" href = "form.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<div class = "center">
<div class="container">
<div class="header">
<h2>Agrega tu direccion</h2>
</div>
<form id="form" class="form" method="POST" action="/submit_data">
<div class="form-control">
<label for="Nombre">Nombre Completo</label>
<input type="text" placeholder="Jose Luis Licea Alcaraz" id="nombre" name="nombre">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="Direccion">Direccion </label>
<input type="text" placeholder="Calle, Numero, Colonia" id="direccion" name="direccion">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="CodigoPostal">Codigo Postal </label>
<input type="text" placeholder="64860" id="cp" name="cp">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="Telefono">Telefono </label>
<input type="tel" placeholder="+528112551388" id="tel" name="telefono">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="Pais">Pais </label>
<select name="pais" id="pais" name="pais">
<option value="mexico">Mexico</option>
<option value="chile">Chile</option>
<option value="argentina">Argentina</option>
<option value="guatemala">Guatemala</option>
<option value="salvador">El Salvador</option>
<option value="santoDomingo">Santo Domingo</option>
</select>
</div>
<div class="header">
<h2>Escoge tu prenda</h2>
</div>
<div class="form-control">
<label for="Prenda">Prenda </label>
<select name="prenda" id="prenda" name="prenda "onchange="changeImage();">
<option value="hoodie_roja">Sudadera Roja</option>
<option value="Hoodie Negra">Sudadera Negra</option>
<option value="Playera">Playera</option>
</select>
</div>
<div class="img_direccion">
<img id="img_prenda" src="hoddie jeil0 R.png" alt="Prenda" width=250 height=250>
</div>
<div class="button_paypal">
<a target="_blank" href="https://paypal.me/AlcarazLicea?locale.x=es_XC">
<button type = "submit" name="paypal" value="image_paypal">
<img src="paypal.png" alt="Check out with PayPal" height="100%" width="80%"/>
</button>
</a>
</div>
</form>
</div>
</div>
</body>
<footer>
<a target="_blank" href="https://www.facebook.com/gaming/Jeil0188">
<img src="facebookGaming.png" width=40 height="40">
</a>
<a target="_blank" href="https://www.facebook.com/Jeil0188">
<img src="facebookLogo.png" width=40 height="40">
</a>
<a target="_blank" href="https://www.twitch.tv/jl0188">
<img src="twitch_invertido.png" width=40 height="40">
</a>
<a target="_blank" href="https://www.instagram.com/jeil0188/">
<img src="instagramlogo_invertido.png" width=40 height="40">
</a>
<div class="footerContainer">
</div>
</footer>
<script src="logic.js"></script>
</html>i dont get anything with my console log, what am i doing wrong?
Please help me i dont get any output out of the console.log
Solution
Hello and thanks to everyone that helped me.
The issue was in the frontend, on my logic.js file i had on my submit function for the button the function: e.preventDefault(); which prevented the form from being submitted, i comment it and created a redirect via express for the href link.
Thanks