Buenas noches usuarios de StackOverflow! Contactaba con vosotros debido a que en mi formulario, no entiendo por que, tras intentar comprobar la informacion del formulario a enviar por post o get por medio de postman-echo para un trabajo de clase que tengo que realizar, el formulario de la pagina se "envia" pero no acepta el get, o al menos no soy capaz de ver en el get o post lo que he enviado como en principio deduzco que deberia, ¿podeis ayudarme? Gracias! El codigo es algo largo ya que es una seccion de mi pagina completa pero si no,
aqui os dejo la seccion del codigo en concreto por si no quereis mirar todo el codigo:
El snippet esta abajo:
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const direccion = document.getElementById('direccion');
const telefono = document.getElementById('telefono');
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
if(checkInputs()===1){
clear();
alert("Gracias por su tiempo!");
}
});
function clear(){
var i;
for (i = 0; (i < document.forms.length); i++) {
document.forms[i].reset();
}
}
function foco(idElemento){
document.getElementById(idElemento).focus();
}
function checkInputs() {
var usernameValue = username.value.trim();
var emailValue = email.value.trim();
var direccionValue = direccion.value.trim();
var telefonoValue = telefono.value.trim();
var check=1;
if(usernameValue === '') {
setErrorFor(username, 'Introduzca un nombre, por favor');
foco('username');
check=0;
} else {
setSuccessFor(username);
}
if(emailValue === '') {
setErrorFor(email, 'Introduzca un email, por favor');
foco('email');
check=0;
} else if (!isEmail(emailValue)) {
setErrorFor(email, 'El email introducido no es valido, intentelo de nuevo');
} else {
setSuccessFor(email);
}
if(direccionValue === '') {
setErrorFor(direccion, 'Introduzca una direccion, por favor');
foco('direccion');
check=0;
} else {
setSuccessFor(direccion);
}
if(telefonoValue === '') {
setErrorFor(telefono, 'Introduzca un telefono, por favor');
foco('telefono');
check=0;
} else if(telefono.value.length !== 9) {
setErrorFor(telefono, 'Su numero no tiene la longitud adecuada');
foco('telefono');
check=0;
} else{
setSuccessFor(telefono);
}
return check;
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray('.segmento').forEach(section => {
ScrollTrigger.create({
trigger: section,
start: 'top top',
pin: true,
pinSpacing: false
});
});
html {
scroll-behavior: smooth;
}
.navbar-nav>li {
padding-left: 20px;
padding-right: 20px;
}
nav {
background-color: #000033;
opacity: 0.95;
}
.cookie-container {
position: fixed;
bottom: -100%;
left: 0;
right: 0;
background: #2f3640;
color: #f5f6fa;
padding: 15px 32px;
box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.151);
transition: 400ms;
}
.cookie-container a {
color: #f5f6fa;
}
.cookie-container.active {
bottom: 0;
}
.cookie-btn {
background: #e84118;
border: 0;
color: #f5f6fa;
padding: 12px 48px;
font-size: 18px;
margin-bottom: 16px;
border-radius: 8px;
cursor: pointer;
}
.column-right {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
}
.column-left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
color: #000;
padding: 0rem 2rem;
}
.column-left h1 {
margin-bottom: 3rem;
font-size: 2rem;
font-style: italic;
}
.column-left p {
margin-bottom: 2rem;
font-size: 2rem;
line-height: 1.1;
}
.column-normal{
vertical-align: middle;
text-align: center;
font-size:3rem;
}
.column-normal p{
margin-bottom: 2rem;
font-size: 4rem;
line-height: 4;
}
.column-normal .image{
width: 100%;
height: 100%;
max-width: 750px;
max-height:400px;
}
.container{
margin:0;
padding: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.segmento {
background: #EC96D3;
}
.cuatro {
background: #66488f;
height: 50vh;
}
.for{
height: 400vh;
}
section{
margin:0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
height: 100vh;
position:static;
display:flex;
justify-content: center;
align-items: center;
}
body{
overflow-x: hidden;
}
section .container{
display:grid;
grid-template-columns: 1fr 1fr;
height:95vh;
padding: 3rem calc((100vw - 1300px)/2);
}
section .containersp{
display: block;
padding: 3rem calc((100vw - 1300px)/2);
height:50vh;
}
section .containerGAL{
padding: 3rem calc((100vw - 1300px)/2);
}
.gallery-container{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 300px);
width: 80%;
margin: 100px auto;
}
.gallery-container .gallery-card{
overflow: hidden;
}
.gallery-container .gallery-card a > img{
width:100%;
height: 100%;
object-fit: cover;
transition: 0.5s;
}
.gallery-container .gallery-card a{
width:100%;
height: 100%;
}
.gallery-container .gallery-card a > img:hover{
transform: scale(1.5);
}
section .containerimg{
display: block;
padding: 3rem calc((100vw - 1300px)/2);
height:60vh;
}
section .text {
color:#fff;
}
section .image{
width: 100%;
height: 100%;
max-width: 750px;
max-height:400px;
}
footer {
margin: 0;
bottom: 0;
position: sticky;
box-sizing: border-box;
display: flex;
color: #fff;
background: #000033;
padding: 50px;
font-size: 14px;
flex-flow: row wrap;
}
.footer-left img {
width: 50%;
max-width: 150px;
max-height: 60px;
margin-top: 20px;
margin-bottom: 20px;
}
.socials {
text-align: center;
}
.footer>* {
flex: 1 100%;
}
.footer-left {
margin-right: 1.25em;
margin-bottom: 2em;
}
.footer-right {
display: flex;
flex-flow: row wrap;
}
.footer-right>* {
flex: 1 50%;
margin-right: 1.25em;
}
.box a {
color: #999;
}
.footer-bottom {
text-align: center;
color: #999;
padding-top: 50px;
}
.footer-left p {
padding-right: 20%;
color: #999;
}
.socials a {
background: #364a62;
width: 40px;
height: 40px;
display: inline-block;
margin-right: 10px;
padding: 10px;
}
@media screen and (min-width: 600px) {
.footer-right>* {
flex: 1;
}
.footer-left {
flex: 1 0px;
}
.footer-right {
flex: 2 0px;
}
}
@media (max-width: 600px) {
.footer {
padding: 15px;
}
}
.btninicio {
position: fixed;
width: 50px;
height: 50px;
background: #6F1E51;
bottom: 40px;
right: 50px;
text-decoration: none;
text-align: center;
line-height: 50px;
color: white;
font-size: 22px;
}
.footer h2 {
font-weight: 600;
font-size: 17px;
}
.footer ul {
list-style: none;
padding-left: 0;
}
.footer li {
line-height: 2em;
}
.footer a {
text-decoration: none;
}
button{
cursor: pointer;
}
section .containerfrm{
padding: 3rem calc((100vw - 1300px)/2);
height: 150vh;
}
.form {
padding: 30px 40px;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label {
display: inline-block;
margin-bottom: 5px;
}
.form-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
font-family: inherit;
font-size: 14px;
padding: 10px;
width: 100%;
}
.form-control input:focus {
outline: 0;
border-color: #777;
}
.form-control.success input {
border-color: #2ecc71;
}
.form-control.error input {
border-color: #e74c3c;
}
.form-control i {
visibility: hidden;
position: absolute;
top: 40px;
right: 10px;
}
.form-control.success i.fa-check-circle {
color: #2ecc71;
visibility: visible;
}
.form-control.error i.fa-exclamation-circle {
color: #e74c3c;
visibility: visible;
}
.form-control small {
color: #e74c3c;
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form-control.error small {
visibility: visible;
}
.form button {
background-color: #051261;
border: 2px solid #051261;
border-radius: 4px;
color: #fff;
display: block;
font-family: inherit;
font-size: 16px;
padding: 10px;
margin-top: 20px;
width: 100%;
}
@media screen and (max-width: 480px) {
.social-panel-container.visible {
transform: translateX(0px);
}
.floating-btn {
right: 10px;
}
}
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="contact.css">
<link rel="stylesheet" href="lightbox.min.css">
<title>Contacto</title>
<link rel="shortcut icon" href="log.png" />
<style>
section .containerfrm{
display: block;
padding: 3rem calc((100vw - 1300px)/2);
height: 150vh;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
overflow: hidden;
width: 900px;
max-width: 100%;
}
.form {
padding: 30px 40px;
}
.form input{
font-size: 10px;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label {
display: inline-block;
margin-bottom: 5px;
}
.form-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
font-family: inherit;
font-size: 14px;
padding: 10px;
width: 100%;
}
.form-control input:focus {
outline: 0;
border-color: #777;
}
.form-control.success input {
border-color: #2ecc71;
}
.form-control.error input {
border-color: #e74c3c;
}
.check {
font-size: 12px;
}
.form-control i {
visibility: hidden;
position: absolute;
top: 40px;
right: 10px;
}
.form-control.success i.fa-check-circle {
color: #2ecc71;
visibility: visible;
}
.form-control.error i.fa-exclamation-circle {
color: #e74c3c;
visibility: visible;
}
.form-control small {
color: #e74c3c;
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form-control.error small {
visibility: visible;
}
.form button {
background-color: #051261;
border: 2px solid #051261;
border-radius: 4px;
color: #fff;
display: block;
cursor: pointer;
font-family: inherit;
font-size: 16px;
padding: 10px;
margin-top: 20px;
width: 100%;
}
.lbl{
font-size: 20px;
}
.navbar-brand img {
max-width: 30px;
max-width: 30px;
}
@media screen and (max-width: 480px) {
.social-panel-container.visible {
transform: translateX(0px);
}
.floating-btn {
right: 10px;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class = "navbar-brand"><img src="log.png"></a>
<a class="navbar-brand" href="#">SneakerReport</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="ini.html"> <i class="fa fa-home"></i> Inicio <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="histo.html"> <i class="fa fa-book"></i> Historia</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-user"></i> Contacto</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-certificate"></i>
Marcas
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="sup.html">Supreme <i class="fa fa-exclamation"></i></a>
<a class="dropdown-item" href="pal.html">Palace <i class="fa fa-exclamation"></i></a>
</div>
</li>
</ul>
</div>
</nav>
<section class="segmento">
<div class = "containersp">
<div class="column-normal">
<p class="text animate__animated animate__heartBeat animate_slow animate__infinite">¿Necesitas mas información?</p>
</div>
</div>
</section>
<section class="segmento dos">
<div class = "container">
<div class="column-right">
<img src="me.jpg" alt="Levv" class="image" />
</div>
<div class="column-left">
<h1 class="text">
Bienvenido
</h1>
<p class="text">¡Buenas! Soy Gonzalo Canteli y un dia como hoy en septiembre del 2018 empecé ademas de mis estudios informáticos, a interesarme por la moda
y la cultura alrededor de ella. Este proyecto es una demostración de algo grande que quiero llevar a cabo.¡Espero que te guste!
</p>
</div>
</div>
</section>
<section class="segmento dos">
<div class = "container">
<div class="column-left">
<p class="text">Si lo desea, puede comunicarse con nosotros a traves de nuestro <a href="#" style="color:pink"onclick="JavaScript:window.location='mailto:'+'gon73li'+'@'+'gmail'+'.com'" > email</a>
</p>
</div>
<div class="column-right">
<p><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3040.6082074751016!2d-3.678305028399778!3d40.35103652134233!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd4226bdd9ea0d85%3A0xafc17f8fcff53d6!2sCentro%20Cultural%20los%20Rosales!5e0!3m2!1ses!2ses!4v1609434348458!5m2!1ses!2ses" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe></p>
</div>
</div>
</section>
<section class="segmento for">
<div class = "containerfrm">
<div class="column-normal">
<form id="form" class="form" action="https://postman-echo.com/get" method="get">
<div class="form-control">
<label for="username">Nombre y Apellidos</label>
<input type="text" placeholder="P ej: Juan Perez" id="username" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error</small>
</div>
<div class="form-control">
<label for="username">Email</label>
<input type="email" placeholder="[email protected]" id="email" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error</small>
</div>
<div class="form-control">
<label for="username">Direccion</label>
<input type="text" placeholder="Avenida de Andalucia 4" id="direccion"/>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error</small>
</div>
<div class="form-control">
<label for="username">Telefono</label>
<input type="tel" placeholder="643936483" id="telefono"/>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error</small>
</div>
<label class="lbl">
<input name="aceptacion" type="checkbox" class="check" id="chk"/>
Acepto el uso de mi informacion con fines informativos
<br />
</label>
<button id="done" style="cursor:pointer" type="submit">Enviar</button>
<button id="boton" style="cursor:pointer">Reiniciar</button>
</form>
</div>
</div>
</section>
<footer class="footer segmento cuatro" style="bottom:0">
<div class="footer-left">
<img src="yzy.png" alt="snk">
<p>SneakerReport nace como una solucion para que gente de todas las edades tenga una posibilidad
de acceder a moda limitada sin pagar reventa.</p>
<div class="socials">
<a href="https://www.facebook.com/profile.php?id=100011277759449" target="_blank"><i class=" fab fa-facebook"></i> </a>
<a href="https://twitter.com/Gonzaacdz" target="_blank"><i class=" fab fa-twitter"></i> </a>
<a href="https://www.instagram.com/gx.neee/?hl=es" target="_blank"><i class=" fab fa-instagram"></i> </a>
</div>
</div>
<ul class="footer-right">
<li>
<h2>Paginas en las que tenemos soporte</h2>
<ul class="box">
<li><a href="sup.html"> Supreme </a></li>
<li><a href="pal.html"> Palace </a></li>
</ul>
</li>
<li>
<h2>Otras secciones</h2>
<ul class="box">
<li><a href="histo.html"> Historia </a></li>
<li><a href="contact.html"> Inscribete </a></li>
</ul>
</li>
<li>
<h2>Direccion</h2>
<ul class="box">
<li> Avenida de los Rosales, 99 </li>
<li> Piso 1º Puerta B </li>
<li> Madrid, ES, 28021 </li>
</ul>
</li>
</ul>
<div class="footer-bottom">
<p>Todos los derechos reservados a ©Gonzalo Canteli 2020 </p>
</div>
</footer>
<a class="btninicio" href="#"> <i class=" fas fa-angle-double-up"></i> </a>
<div class="cookie-container">
<p>Utilizamos cookies propias y de terceros para mejorar la experiencia del usuario a través de su navegación. Si continúas navegando aceptas su uso. <a href="#">Política de cookies. </a></p>
<button class="cookie-btn">
De acuerdo
</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script src="cookieplugin.js"></script>
<script src="lightbox-plus-jquery.min.js"></script>
<script src="lightbox.min.js"></script>
<script type ="text/javascript" src="contact.js"></script>
<script type="text/javascript">
document.getElementById("boton").onclick=clear;
function clear(){
var i;
for (i = 0; (i < document.forms.length); i++) {
document.forms[i].reset();
}
}
</script>
</body>
</html>
e.preventDefault();
como primera línea de la función y eso hace que el formulario no se envíe. Deberías colocarlo si falla la comprobación y no limpiar los campos, a menos que quieras enviar el formulario por AJAX.