1

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:
introducir la descripción de la imagen aquí
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 &copy;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>

3
  • 1
    Tienes 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.
    – Triby
    Commented el 7 ene. 2021 a las 21:27
  • Como lo cambio entonces? @Triby
    – Wazabi
    Commented el 7 ene. 2021 a las 21:28
  • Y bueno, en general como puedo hacer que se envie la informacion? Ya he conseguido que se abra la pagina pero no se envian los datos :( Si sabes como resolverlo respondeme por aqui o añadelo como respuesta si no es mucha molestia @Triby
    – Wazabi
    Commented el 7 ene. 2021 a las 21:37

1 respuesta 1

0

Debes borrar el e.preventdefault(); al principio de la función.

Como indica Triby en los comentarios: "Tienes 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".

1
  • 2
    Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 7 jun. 2022 a las 18:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.