1

introducir la descripción de la imagen aquí[![introducir la descripción de la imagen aquí][2]][2]Estoy tratando de enviar un formulario via ajax, para evitar que la página se refresque:

function form(){
      $.ajax({
          type: 'POST',
          url: 'formulario.php',
          data: $('#formulario').serialize(),
          success: function(data) {

              console.log("sin refresh");

          }
      });
    }

HTML

 <form action="formulario.php" method="post" name="formulario" id="formulario">
       <input type="text" name="name" class="form-control" id="name" placeholder="Your Name..." required>
       <input type="text" name="company" class="form-control" id="company" placeholder="Company..." required>
       <input type="email" name="email" class="form-control" id="email" placeholder="Your Email..." required>
       <p style="font-size: 15px; margin-left: 12px;">
          What service interests you?
          <select name="service">
             <option>Compliance</option>
             <option>Cybersecurity</option>
             <option>Network Engineering</option>
          </select>
       </p>
       <br>
       <textarea name="message" class="form-control" id="message" placeholder="Messages..." required></textarea>
       <input type="checkbox" name="condiciones" id="condiciones" value="1" required> 
       <a href="privacy.html" target="new">I have read the privacy notice</a><br><br> <button type="button" class="btn btn-blue btn-effect" id="enviar" onClick="form()" style="color: white">Send</button> 
    </form>
6
  • 1
    Y cual es el error o problema que obtienes? el 11 jul. 2017 a las 16:21
  • Cambia el nombre de la función onclick, no puede ser form()
    – Carmen
    el 11 jul. 2017 a las 16:27
  • Ya lo cambie, pero aun continua sin enviar el formulario. Antes solo utilizaba php y se enviaba perfectamente, pero por ajax no puedo. el 11 jul. 2017 a las 17:34
  • ya añadí la imagen en mi post.. el 12 jul. 2017 a las 14:27
  • Tienes errores de sintaxis que hacen que ni tu archivo de JS se compile correctamente, revisa primero esos errores
    – Yikarus
    el 12 jul. 2017 a las 14:30

3 respuestas 3

1

Deberías modificar el nombre a la función en JS, la palabra form no se puede utilizar como nombre de función, es una palabra reservada (documentación sobre palabras reservadas en javascript)

Espero haber sido de ayuda, saludos!!

PD: no olvides agregar la referencia a jquery :)

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
4
  • Ya lo cambie, pero aun continua sin enviar el formulario. el 11 jul. 2017 a las 17:34
  • Has probado a incluir el jquery? pulsa F12 en el navegador y dime qué error te sale en la consola el 11 jul. 2017 a las 19:23
  • ya mande llamar el jquery ,en la consola aparece un error de un fisrt child del menu y del mapa de google el 11 jul. 2017 a las 21:56
  • Pégame el error cuando puedas al pulsar en el botón o haz una captura de pantalla (a ver si lo solucionamos) el 12 jul. 2017 a las 11:30
0

Recuerda modificar el formulario. En estos casos, es mejor evitar asignar una función onClick, porque si el usuario desea usar la tecla Enter no funcionará. Adicionalmente debes verificar los errores que te muestra la consola, pues éstas no tienen que ver con el formulario. Sin embargo te dejo cómo podría ser un envío con jQuery.

<script>
    $('document').ready(function(){
        $('#formulario').submit(function(evt) {
            var currentData = $(this).serialize();

            // This will avoid the form sending through html
            evt.preventDefault();

            $.ajax({
                type: 'POST',
                url: 'formulario.php',
                data: currentData,
                beforeSend: function() {
                    console.log('Enviando...');
                },
                success: function(data) {
                    alert('Mensaje enviado');
                    console.log("sin refresh");
                }
            });
        });
    });
</script>

<form name="formulario" id="formulario"> <!-- Delete "action" and "method" -->
    <input type="text" name="name" class="form-control" id="name" placeholder="Your Name..." required />
    <input type="text" name="company" class="form-control" id="company" placeholder="Company..." required />
    <input type="email" name="email" class="form-control" id="email" placeholder="Your Email..." required />
    <p style="font-size: 15px; margin-left: 12px;">
        What service interests you?
        <select name="service">
            <option>Compliance</option>
            <option>Cybersecurity</option>
            <option>Network Engineering</option>
        </select>
    </p>
    <br />
    <textarea name="message" class="form-control" id="message" placeholder="Messages..." required></textarea>
    <input type="checkbox" name="condiciones" id="condiciones" value="1" required />
    <a href="privacy.html" target="new">I have read the privacy notice</a>
    <br><br>
    <button type="submit" class="btn btn-blue btn-effect" id="enviar" style="color: white">Send</button><!-- Delete onClick event -->
</form>
6
  • lo cambie pero ahora no pasa nada, doy clic y no hace ninguna acción el 12 jul. 2017 a las 15:34
  • Revisa con un debugger antes del envío del $.ajax, y si tienes la opción de verificar en el archivo php qué está llegando por $_POST
    – p1errot
    el 12 jul. 2017 a las 15:36
  • Adicionalmente, el button que tienes al final, debes cambiarle el type por type="submit"
    – p1errot
    el 12 jul. 2017 a las 15:44
  • wuju! listo ya funciona ! muchísimas gracias, una ultima pregunta, se puede agregar un mensaje de alerta de enviado? por que lo envía pero no alerta, antes tenia una sobre el php que al enviar el formulario en java ya no la considera el 12 jul. 2017 a las 16:54
  • Dentro del ajax, puedes colocar lo que necesites. Si deseas colocar un mensaje antes de que se envíe... algo así como Enviando... puedes usar la propiedad beforeSend: function() { console.log('Enviando...'); } y para colocar el mensaje de Enviado lo puedes hacer dentro del sucess que ya tienes, quedaría algo como success: function() { alert('Mensaje enviado.'); } .
    – p1errot
    el 12 jul. 2017 a las 17:06
-3

El refresh se realiza debido a que estas usando la etiqueta form para tu formulario, para que este no se refresque debes de quitarla y usar botones tipo button para enviar los datos al ajax.

function form(){
      $.ajax({
          type: 'POST',
          url: 'formulario.php',
          data: $('#formulario').serialize(),
          success: function(data) {

              console.log("sin refresh");

          }
      });
    }


<div id="formulario">
    <input type="text" name="name" class="form-control" id="name" placeholder="Your Name..." required>
 <input type="text" name="company" class="form-control" id="company" placeholder="Company..." required>
 <input type="email" name="email" class="form-control" id="email" placeholder="Your Email..." required>
<p style="font-size: 15px; margin-left: 12px;">What service interests you?
 <select name="service">
 <option>Compliance</option>
 <option>Cybersecurity</option>
 <option>Network Engineering</option>
 </select> </p><br>
 <textarea name="message" class="form-control" id="message" placeholder="Messages..." required></textarea>
 <input type="checkbox" name="condiciones" id="condiciones" value="1" required> 
<a href="privacy.html" target="new">I have read the privacy notice</a><br><br> <button type="button" class="btn btn-blue btn-effect" id="enviar" onClick="form()" style="color: white">Send</button> </div>
2
  • Ya lo cambie, pero aun continua sin enviar el formulario. el 11 jul. 2017 a las 17:34
  • Con un simple preventDefault o con return false en un atributo onSubmit se detiene el envío del formulario y el refrescar de la página
    – Yikarus
    el 12 jul. 2017 a las 14:39

Tu Respuesta

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

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