1

Hola amigos de stackoverflow tengo una duda de por qué mi formulario hace que se actualice mi página si aún no le implemento nada para enviarlo por e-mail saludos a todos y espero me puedan resolver mi duda.

<section id="fs-form-wrap" class="fs-form-wrap ">
  <div class="tittleC">
    Contacto
  </div>
  <form id="myform" class="fs-form fs-form-full" autocomplete="nope" method="post">
    <ol class="fs-fields">
      <li>
        <label class="fs-field-label fs-anim-upper" for="q1">Cuál es tu nombre?</label>
        <input id="q1" class="fs-anim-lower" type="text" name="q1" placeholder="Andres Cholula Flores" autocomplete="nope" required/>
      </li>
      <li>
        <label class="fs-field-label fs-anim-upper" for="q2" data-info="we won´t send you spam, we promise...">Cuál es tu e-mail?</label>
        <input class="fs-anim-lower" id="q2" type="email" name="q2" placeholder="[email protected]" autocomplete="nope" required/>
      </li>
      <li data-input-trigger>
        <label class="fs-field-label fs-anim-upper" for="q3" data-info="This will help us know what kind of service you need">Qué servicio de diseño requiere?</label>
        <div class="fs-radio-group fs-radio-custom clearfix fs-anim-lower">
          <span><input id="q3a" name="q3" type="checkbox" value="Imagen Corporativa"/><label for="q3a" class="radio-conversion">Imagen Corporativa</label></span>
          <span><input id="q3b" name="q3" type="checkbox" value="Banner Animado"/><label for="q3b" class="radio-social">Banner Animado</label></span>
          <span><input id="q3c" name="q3" type="checkbox" value="Publicidad"/><label for="q3c" class="radio-mobile">Publicidad</label></span>
          <span><input id="q3d" name="q3" type="checkbox" value="Ilustración"/><label for="q3d" class="radio-conversion">Ilustración</label></span>
        </div>
        <div class="fs-radio-group fs-radio-custom clearfix fs-anim-lower">
          <span><input id="q3e" name="q3" type="checkbox" value="Rediseño (nueva imagen)"/><label for="q3e" class="radio-social">Rediseño</label></span>
          <span><input id="q3f" name="q3" type="checkbox" value="Tarjetas Publicitarias"/><label for="q3f" class="radio-mobile">Tarjetas publicitarias</label></span>
          <span><input id="q3g" name="q3" type="checkbox" value="Comercial Animado"/><label for="q3g" class="radio-social">Comercial Animado</label></span>
          <span><input id="q3h" name="q3" type="checkbox" value="Otras no mencionadas"/><label for="q3h" class="radio-mobile">Otro</label></span>
        </div>
      </li>
      <li>
        <label class="fs-field-label fs-anim-upper" for="q4">Descripción empresa o proyecto</label>
        <textarea class="fs-anim-lower" id="q4" name="q4" placeholder="Nombre, tiempo & Giro empresarial o nuevo proyecto. Razones del proyecto." autocomplete="nope"></textarea>
      </li>
      <li data-input-trigger>
        <label class="fs-field-label fs-anim-upper" for="q5" data-info="This will help us know what kind of service you need">Cómo supiste de mis servicios?</label>
        <div class="fs-radio-group fs-radio-custom clearfix fs-anim-lower">
          <span><input id="q5a" name="q5" type="checkbox" value="Redes Sociales"/><label for="q5a" class="radio-conversion">Redes Sociales</label></span>
          <span><input id="q5b" name="q5" type="checkbox" value="Amigos o familiares"/><label for="q5b" class="radio-social">Amigos o familiares</label></span>
          <span><input id="q5c" name="q5" type="checkbox" value="Otros clientes"/><label for="q5c" class="radio-mobile">Otros clientes</label></span>
        </div>
        <div class="fs-radio-group fs-radio-custom clearfix fs-anim-lower">
          <span><input id="q5d" name="q5" type="checkbox" value="Una visión"/><label for="q5d" class="radio-conversion">Una visión</label></span>
          <span><input id="q5e" name="q5" type="checkbox" value="Google"/><label for="q5e" class="radio-social">Google</label></span>
          <span><input id="q5f" name="q5" type="checkbox" value="Personalmente"/><label for="q5f" class="radio-mobile">Personalmente</label></span>
        </div>
      </li>
    </ol>
    <button class="fs-submit" type="submit">Enviar</button>
  </form>
</section>

2
  • Porque es una forma con metodo POST y un boton tipo submit
    – alanfcm
    el 10 sep. 2018 a las 23:57
  • De hecho ya le retiré el type y method y aún así sigue haciendo lo mismo, alguna sugerencia o hasta que haga la implementación del envío de los datos.?¿
    – WTFChamp
    el 11 sep. 2018 a las 0:06

2 respuestas 2

2

Lo que pasa, es que estas utilizando un formulario con método POST, por lo cual, automáticamente, cualquier <input type="submit"> o <button> va a disparar el formulario.

Si por algún motivo quieres evitar que esto pase, podes hacer lo siguiente:

<form method="POST">
<input type="text" placeholder="Ejemplo">
<input type="submit" onclick="event.preventDefault();">
</form>

como podes ver, en el evento onclick llame a event.preventDefault(), de esta manera, se previene el envío del formulario, por ende, la página no actualizará.

Saludos

1
  • 1
    Gracias, lo he hecho y me ha funcionado de maravilla, agradezco la resolución de mi duda y que tengas un excelente día :)
    – WTFChamp
    el 11 sep. 2018 a las 0:23
1

Al tener el botón tipo submit y tener el método post tu formulario e intentara enviar los datos y eso hace que refresque la página. Si quieres evitar que se refresque puedes emplear este código en tu JS:

event.preventDefault()

Quedando tu botón asi:

<input type="submit" onclick="event.preventDefault();">

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.