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('[email protected]'); // ← 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
    Commented 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. Commented 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

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.