humberto.mazariegos
Enviado por humberto.mazariegos el Lun, 06/05/2019 - 16:49

Mostrando Modal con Sweetalert2 en un Webform Drupal 7 

Paso 1: 

Creamos nuestro formulario Webform en nuestro sitio con los campos apropiados

Paso 2: 

Descargamos nuestra libreria y la instalamos en nuestro sitio.

Paso 3:

Empezamos a validar nuestro formulario webform

Paso 4: 

Tomamos el ID de nuestro Submit, con esto tendriamos que colocar el script para tirar el modal personalizado cuando le demos la opcion de Submit 

(function ($)
 
{
    $(document).ready(function() {
 
    var form = $('#webform-client-form-31');
    var name = $('#webform-client-form-31 #edit-submitted-name');
    var surname = $('#webform-client-form-31 #edit-submitted-surname');
    var month = $('#webform-client-form-31 #edit-submitted-month');
    var day = $('#webform-client-form-31 #edit-submitted-dd-day');
    var year = $('#webform-client-form-31 #edit-submitted-yy-year');
    var email = $('#webform-client-form-31 #edit-submitted-email');
    var tel = $('#webform-client-form-31 #edit-submitted-cellphone');
    var gender = $('#webform-client-form-31 #edit-submitted-gender');
    var province = $('#webform-client-form-31 #edit-submitted-province');
    var terms = $('#webform-client-form-31 #edit-submitted-accept-1');
 
    var boton = $('#webform-client-form-31 .form-submit');
 
    boton.attr('disabled', true);
 
    name.change(function(){
        verificar_campo(name);
    });
    surname.change(function(){
        verificar_campo(surname);
    });
    month.change(function(){
        verificar_campo_select(month);
    });
    day.change(function(){
        verificar_campo_select(day);
    });
    year.change(function(){
        verificar_campo_select(year);
    });
    email.change(function(){
        verificar_campo(email);
    })
    tel.change(function(){
        verificar_campo_tel(tel);
    })
    gender.change(function(){
        verificar_campo_select(gender);
    });
    province.change(function(){
        verificar_campo_select(province);
    });
    terms.change(function(){
        verificar_campo_check(terms);
    });
 
    function verificar_campo(param){
        if(param.val().trim().length > 1){
            param.addClass('field-full');
        }else if(param.val().trim().length == 0){
            param.removeClass('field-full');
        }
    }
 
    function verificar_campo_select(param){
        if(param.val() != 0){
            param.addClass('field-full');
        }else{
            param.removeClass('field-full');
        }
    }
 
    function verificar_campo_tel(param){
        if(param.val().length == 7){
            param.addClass('field-full');
        }else{
            param.removeClass('field-full');
        }
    }
 
    function verificar_campo_check(param){
        if(param.prop('checked') == true){
            param.addClass('field-full');
        }else{
            param.removeClass('field-full');
        }
    }
 
    form.change(function(){
        if(name.hasClass('field-full') && surname.hasClass('field-full') 
            && month.hasClass('field-full') && day.hasClass('field-full')
            && year.hasClass('field-full') && email.hasClass('field-full')
            && tel.hasClass('field-full') && gender.hasClass('field-full')
            && province.hasClass('field-full') && terms.hasClass('field-full')){
            boton.attr('disabled', false);
        }else{
            boton.attr('disabled', true);
        }
    });
 
    $('#edit-submitted-cellphone').attr('maxlength', 7);
 
 
        // Interceptamos el evento submit
        $('#webform-client-form-31').submit(function() {
      // Enviamos el formulario usando AJAX
 
            $.ajax({
                type: 'POST',
                url: $(this).attr('action'),
                data: $(this).serialize(),
                // Mostramos un mensaje con la respuesta de PHP
                success:function (lsls) {
                    swal({
                            imageUrl: './sites/default/files/logo.png',
                            title: "Succesful registration",
                            text: "You will recieve new updates about Brutal Fruit.",
                            footer: '<a href="/"> Go back home</a>',
                            showCloseButton: true,
                    });
 
                    $('.swal2-container button.swal2-close').click(function() { 
                        location.reload();
                    }); 
                },
 
 
            })  
            return false;   
 
        });
 
        });
})(jQuery);