0

tengo armado este form con .js y .php pero necesito modificarlo para que cuando la consulta sea enviada haga un redirect a una thankyou.html. La verdad que de ajax y js conozco muy poco y estoy necesitando ayuda. Les dejo lo que tengo armado, funciona perfectamente, solo me falta que el redireccionamiento.

<form role="form" method="post" id="reused_form" enctype=&quot;multipart/form-data&quot;>
  <input type="text" id="name" name="name" maxlength="256" placeholder="Nombre y Apellido" class="text-field w-input" required>
  <input type="email" id="email" name="email" placeholder="Email" maxlength="256" class="text-field w-input" required>
  <input type="text" id="tel" name="tel" placeholder="Teléfono" maxlength="256" class="text-field w-input" required>
  <textarea name="message" id="message" placeholder="Mensaje" maxlength="5000" class="textarea w-input"></textarea>
  <label for="file-upload" class="custom-file-upload">
              <i class="material-icons">cloud_upload</i><span style="position: absolute;margin: 4px 12px">etc etc</span>
              <input type="file" id="image" name="image" >
          </label>
  <button type="submit" class="submit-button" id="btnContactUs" style="color:#fff">Enviar consulta</button>
</form>

<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

require_once './vendor/autoload.php';

use FormGuide\Handlx\FormHandler;


$pp = new FormHandler(); 

$validator = $pp->getValidator();
$validator->fields(['name','email'])->areRequired()->maxLength(50);
$validator->field('email')->isEmail();
$validator->field('message')->maxLength(6000);


$pp->attachFiles(['image']);


$pp->sendEmailTo('mail@gmail.com'); // ← Your email here

echo $pp->process($_POST);

$(function()
{
    function after_form_submitted(data) 
    {
        if(data.result == 'success')
        {
            $('form#reused_form').hide();
            $('#success_message').show();
            $('#error_message').hide();
        }
        else
        {
            $('#error_message').append('<ul></ul>');

            jQuery.each(data.errors,function(key,val)
            {
                $('#error_message ul').append('<li>'+key+':'+val+'</li>');
            });
            $('#success_message').hide();
            $('#error_message').show();

            //reverse the response on the button
            $('button[type="button"]', $form).each(function()
            {
                $btn = $(this);
                label = $btn.prop('orig_label');
                if(label)
                {
                    $btn.prop('type','submit' ); 
                    $btn.text(label);
                    $btn.prop('orig_label','');
                }
            });
            
        }//else
    }

    $('#reused_form').submit(function(e)
      {
        e.preventDefault();

        $form = $(this);
        //show some response on the button
        $('button[type="submit"]', $form).each(function()
        {
            $btn = $(this);
            $btn.prop('type','button' ); 
            $btn.prop('orig_label',$btn.text());
            $btn.text('Sending ...');
        });
        

                    var formdata = new FormData(this);
            $.ajax({
                type: "POST",
                url: 'handler.php',
                data: formdata,
                success: after_form_submitted,
                dataType: 'json' ,
                processData: false,
                contentType: false,
                cache: false        
            });
        
      });   
});

1
  • Te sugiero editar el título de la pregunta, para que todo esté en el buen español :D
    – fredyfx
    el 12 oct. 2017 a las 15:51

2 respuestas 2

0

Con el método done() puedes hacer una acción una vez que el ajax haya terminado y con window.location, puedes redirigir a otra página

 $.ajax({
                    type: "POST",
                    url: 'handler.php',
                    data: formdata,
                    success: after_form_submitted,
                    dataType: 'json' ,
                    processData: false,
                    contentType: false,
                    cache: false        
                })
.done(function( data ) {
        window.location = 'tupath/thankyou.html'
      });

http://api.jquery.com/jquery.ajax/

puedes leer más en la documentación

1
  • Muchas gracias!! Esta fue la solución. el 11 oct. 2017 a las 18:06
0

Como alternativa a lo que Sr1871 planteó también podrías usar:

$.ajax({
    type: "POST",
    url: 'handler.php',
    data: formdata,
    success: after_form_submitted,
    dataType: 'json' ,
    processData: false,
    contentType: false,
    cache: false,
    success: function(respuesta){  // la funcion success se ejecuta cuando AJAX ha sido cargado correctamente y la respuesta del archivo es 200 (Correcto)...
        window.location = 'directorio_url/thankyou.html';
    },
    error: function(respuesta){ //la funcion error
        // Si algo falla con AJAX o la respuesta del servidor es error aquí defines qué se debe hacer.
    }
});

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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