Problem with my form

Navigation
1

Hello stackoverflow friends, I have a question about why my form makes my page update if I still do not implement anything to send it by e-mail greetings to all and I hope you can solve my question. 

<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>
    
asked by WTFChamp 11.09.2018 в 01:52
source

2 answers

2

What happens is that you are using a form with POST method, so, automatically, any <input type="submit"> or <button> will trigger the form.

If for some reason you want to prevent this from happening, you can do the following: 

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

As you can see, in the event onclick call event.preventDefault() , in this way, the sending of the form is prevented, therefore, the page will not update.

Greetings

    
answered by 11.09.2018 / 02:11
source
1

By having the button type submit and have the method post your form and try to send the data and that makes the page refresh. If you want to avoid cooling, you can use this code in your JS: 

event.preventDefault()

Remaining your button like this: 

<input type="submit" onclick="event.preventDefault();">
    
answered by 11.09.2018 в 02:06
What is the difference between the verbs Patch and Put? Why does not the while function?