1

Este es el código del AJAX en donde recibo las variables del formulario

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">

function enviar() {
  event.preventDefault();
  var nombre = document.getElementById('nombre').value;
  var correo = document.getElementById('correo').value;
  var asunto = document.getElementById('asunto').value;
  var mensaje = document.getElementById('mensaje').value;
  var dataen = 'nombre='+nombre+'&correo='+correo+'&asunto='+asunto+'&mensaje='+mensaje;
  $.ajax({
    type:'post',
    url:'funciones.php',
    data:dataen,
    success: function(resp) {
      $('#respa').html(resp);
    }
  });
            
  return false;
}

</script>    

Puse el tipo de botón en submit porque si lo pongo en button, no se envía la información, solamente poniendo el tipo de botón en submit

<?php include "funciones.php" ?> 
    <form method="post" name="validFormulario" id="validFormu" onclick="return enviar()">
        <div class="form-row">
            <div class="form-group col-md-6">
                <input type="text" class="form-control" name="nombre"  id="nombre" placeholder="Nombre">
            </div>
            <div class="form-group col-md-6">
                <input type="email" class="form-control" name="correo" id="correo" placeholder="Correo Electrónico">
            </div>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" name="asunto" id="asunto" placeholder="Asunto">
        </div>
        <div class="form-group">
            <textarea class="form-control" name="mensaje" id="mensaje" rows="5" placeholder="Mensaje"></textarea>
            <div class="text-center">
                <input type="button" name="btn_EnviarCorreo" value="Enviar Ahora">
            </div>
            </form>
            <br>
        </div>
    <?php mensajeCorreo() ?> 
    <p id="response"></p>

Agregué el código pero no hace nada.

boton.addEventListener("click", (event) => {

let boton = document.getElementById("envio");

var nombre = document.getElementById('nombre').value;
var correo = document.getElementById('correo').value;
var asunto = document.getElementById('asunto').value;
var mensaje = document.getElementById('mensaje').value;
0

2 respuestas 2

0

Puedes hacer lo siguiente:

  • Obtén el botón o input por medio de un ID que le declares y este será el elemento al cual le evaluemos si el usuario da click sobre el
  • Agrégale un listener al evento click
  • A la función callback que pasarás como segundo argumento le indicas que prevenga el evento que sería el submit

Entonces tu botón así

<input type="button" id="envio" name="btn_EnviarCorreo" value="Enviar Ahora">

Posterior en tu JS lo recuperas así

let boton = document.getElementById("envio");

Le agregas el listener

boton.addEventListener("click", (event) => {
    event.preventDefault();
    ..................aquí tu código para la petición Ajax
    ...................
});
1
  • si funciona, pero al momento de enviar el formulario se envía la información pero se me desliza hacia el inicio y es lo que quiero evitar!!!
    – Micha Ruiz
    Commented el 30 jul. 2020 a las 5:30
0

OPCIÓN 1

El elemento form tiene el evento submit que se ejecuta cuando se envía el formulario. Para que se ejecute este evento en tu formulario tienes que tener un <button> o <input type="submit" value="Enviar"/>.

En tu html tenias los elementos mal cerrados, los he corregido y he cambiado <input type="submit". También he quitado el onclick del form.

<form method="post" name="validFormulario" id="validFormu">
    <div class="form-row">
        <div class="form-group col-md-6">
            <input type="text" class="form-control" name="nombre" id="nombre" placeholder="Nombre">
        </div>
        <div class="form-group col-md-6">
            <input type="email" class="form-control" name="correo" id="correo" placeholder="Correo Electrónico">
        </div>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" name="asunto" id="asunto" placeholder="Asunto">
    </div>
    <div class="form-group">
        <textarea class="form-control" name="mensaje" id="mensaje" rows="5" placeholder="Mensaje"></textarea>
        <div class="text-center">
            <input type="submit" name="btn_EnviarCorreo" value="Enviar Ahora">
        </div>
    </div>
</form>
<br>

En tu script puedes escuchar el evento submit y hacer el ajax que deseas hacer. Como veo que incluyes jQuery pues lo he usado en mi ejemplo. Quedarías algo así.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">

function enviar(event) {
  event.preventDefault();
  var nombre = document.getElementById('nombre').value;
  var correo = document.getElementById('correo').value;
  var asunto = document.getElementById('asunto').value;
  var mensaje = document.getElementById('mensaje').value;
  var dataen = 'nombre='+nombre+'&correo='+correo+'&asunto='+asunto+'&mensaje='+mensaje;
  $.ajax({
    type:'post',
    url:'funciones.php',
    data:dataen,
    success: function(resp) {
      $('#respa').html(resp);
    }
  });
            
  return false;
}

// se selecciona el formulario con el id que has especificado en tu html
// se indica que se quiere escuchar el evento submit sobre este elemento (que es el form)
// y se le pasa la referencia de la función a ejecutar cuando se haga el submit
// automáticamente Javascript pasará el event a tu función cuando la llame

$('#validFormu').submit(enviar);
</script>  

OPCIÓN 2

Si quieres seguir usando el evento onclick directamente en el form deberías de añadir el parámetro event. Así tu función enviar tendrá acceso a dicho parámetro.

<form method="post" name="validFormulario" id="validFormu" onclick="return enviar(event)">
function enviar(event) { ... }

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.