0

I´m migrating a form from an old website to a new one, but the jQuery modal that should open after the AJAX form submission doesn't work.

You can test it here https://tomlab.dreamhosters.com/sign-the-declaration/

The form seems to be working, but the popup is not showing up, but if I access https://tomlab.dreamhosters.com/sign-the-declaration/#modal straight, it opens up correctly.

Hope you can help me! I've been fighting with this for a few days.

Thanks!

Here is the function code:

function forms_sumate_func() {
    $lang = 'en';
    if ( get_locale() == 'es_ES' ) {
        $lang = 'es';
    }

    //$file = plugins_url() . '/forms-sumate/formulario-sumate-' . $lang . '.html';

    $file = ABSPATH . '/wp-content/plugins/forms-sumate/formulario-sumate-' . $lang . '.html';

    return @file_get_contents($file);
}

add_shortcode( 'forms_sumate', 'forms_sumate_func' );

// incluimos js de formularios

function ajax_form_sumate_enqueue_scripts() {
    wp_enqueue_script( 'form_sumate_js', plugins_url() . '/forms-sumate/js/forms-sumate.js', array('jquery') );
    wp_enqueue_style( 'form_sumate_css', plugins_url() . '/forms-sumate/css/forms-sumate.css' );
    wp_localize_script( 'form_sumate_js', 'forms_sumate_url', array( 'url_countries_json' => plugins_url() . '/forms-sumate/js/countries.json', 'ajax_url' => admin_url( 'admin-ajax.php' )));
    
    wp_enqueue_script( 'remodal_js', plugins_url() . '/remodal/js/remodal.min.js', array('jquery') );
    wp_enqueue_script( 'remodal_js', plugins_url() . '/remodal/js/custom.js', array('jquery') );
    wp_enqueue_style( 'remodal_css', plugins_url() . '/remodal/css/remodal.css' );
    wp_enqueue_style( 'remodal_theme_css', plugins_url() . '/remodal/css/remodal-default-theme.css' );
}
add_action( 'wp_enqueue_scripts', 'ajax_form_sumate_enqueue_scripts' );

// Llamadas ajax

add_action( 'wp_ajax_nopriv_send_form_sumate', 'send_form_sumate' );
add_action( 'wp_ajax_post_send_form_sumate', 'send_form_sumate' );

form-sumate.js

     // hola a todos
     
    
    jQuery( document ).on( 'click', '#btn-enviar-personas', function(e) {  
        e.preventDefault();
        
        sumateFormApp.init('#formPersonas');
    }); 
    

    jQuery( document ).on( 'click', '#btn-enviar-entidades', function(e) {  
        e.preventDefault();
        
        sumateFormApp.init('#formEntidades');
    });

    var sumateFormApp = {
        //Validate Contact Us Data
        validate: function (nameForm) {
            
            var $sumateFormName = jQuery(nameForm + " input[name='your-name']");
            var $sumateFormSurname = jQuery(nameForm + " input[name='your-surname']");
            var $sumateFormEmail = jQuery(nameForm + " input[name='your-email']");
            var $sumateFormCountry = jQuery(nameForm + " select[name='your-country'] option:selected");
            var $sumateFormPhone = jQuery(nameForm + " input[name='your-phone']");
            var $sumateFormLegal = jQuery(nameForm + " input[name='your-legal']");
            
            
            // entidades
            var $sumateFormEntityName = jQuery(nameForm + " input[name='your-entity-name']");
            var $sumateFormContactPerson = jQuery(nameForm + " input[name='your-contact-person']");
            var $sumateFormYourSuggestion = jQuery(nameForm + " textarea[name='your-query']");

            var $errorName = jQuery(nameForm + " .err-name");
            var $errorSurName = jQuery(nameForm + " .err-surname");
            var $errorEmail = jQuery(nameForm + " .err-email");
            var $errorCountry = jQuery(nameForm + " .err-country");
            var $errorPhone = jQuery(nameForm + " .err-phone");
            var $errorFormEntityName = jQuery(nameForm + " .err-entity-name");
            var $errorFormContactPerson = jQuery(nameForm + " .err-contact-person");
            var $errorFormYourSuggestion = jQuery(nameForm + " .err-query");
            var $errorFormLegal = jQuery(nameForm + " .err-legal");
            
            
            var name = $sumateFormName.val(); // get the value of the input field
            var surname = $sumateFormSurname.val();
            var country = $sumateFormCountry.val();
            
            var phone = $sumateFormPhone.val();
            var entityName = $sumateFormEntityName.val();
            var contactPerson = $sumateFormContactPerson.val();
            var query = $sumateFormYourSuggestion.val();
            
            var legal = $sumateFormLegal.is(':checked');
            
            var error = false; // we will set this true if the form isn't valid
            
            if (name === "" || name === " ") {
                $errorName.show(500);
                $errorName.delay(4000);
                $errorName.animate({
                    height: 'toggle'  
                }, 500, function() {
                    // Animation complete.
                }); 
                error = true; // change the error state to true
            }
            if (country === "" || country === " ") {
                $errorCountry.show(500);
                $errorCountry.delay(4000);
                $errorCountry.animate({
                    height: 'toggle'  
                }, 500, function() {
                    // Animation complete.
                }); 
                error = true; // change the error state to true
            }



            if (phone === "" || phone === " ") {
                $errorPhone.show(500);
                $errorPhone.delay(4000);
                $errorPhone.animate({
                    height: 'toggle'  
                }, 500, function() {
                    // Animation complete.
                }); 
                error = true; // change the error state to true
            }

            if (entityName === "" || entityName === " ") {
                $errorFormEntityName.show(500);
                $errorFormEntityName.delay(4000);
                $errorFormEntityName.animate({
                    height: 'toggle'  
                }, 500, function() {
                    // Animation complete.
                }); 
                error = true; // change the error state to true
            }
            
            if (contactPerson === "" || contactPerson === " ") {
                $errorFormContactPerson.show(500);
                $errorFormContactPerson.delay(4000);
                $errorFormContactPerson.animate({
                    height: 'toggle'  
                }, 500, function() {
                    // Animation complete.
                }); 
                error = true; // change the error state to true
            }
            
            if (query === "" || query === " ") {
                $errorFormYourSuggestion.show(500);
                $errorFormYourSuggestion.delay(4000);
                $errorFormYourSuggestion.animate({
                    height: 'toggle'  
                }, 500, function() {
                    // Animation complete.
                }); 
                error = true; // change the error state to true
            }
            
            if (!legal) {
                $errorFormLegal.show(500);
                $errorFormLegal.delay(4000);
                $errorFormLegal.animate({
                    height: 'toggle'  
                }, 500, function() {
                    // Animation complete.
                }); 
                error = true; // change the error state to true
            }
            
            var email_compare = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/; // Syntax to compare against input
            var email = $sumateFormEmail.val().toLowerCase(); // get the value of the input field

            if (email === "" || email === " " || !email_compare.test(email)) { // check if the field is empty
                $errorEmail.show(500);
                $errorEmail.delay(4000);
                $errorEmail.animate({
                    height: 'toggle'  
                }, 500, function() {
                    // Animation complete.
                });         
                error = true;
            }

            return error;
        },
        sendAjaxForm : function (nameForm) {
            
            var dataString = {action:'send_form_sumate'};
            var form = jQuery(nameForm);
            jQuery.ajax({
                url : forms_sumate_url.ajax_url,
                type : "POST",
                data : form.serialize(),
                //data : dataString,
                success : function( response ) {
                    
                    console.log(response);
                    
                    if (response.indexOf("OK") !== -1) {
                        jQuery(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');                    
                        jQuery('.success' + nameForm.replace('#','')).show();
                        
                        var id = uniqId();
                        
                        console.log('id enviado ' + id);
                        // ponerle un settimeout al success y despues esto
                        //adf.ClickTrack(this,687887,'worldcancerresearchday.es/sumate-a-la-iniciativa/TYP',
                        //{orderid: id});
                        
                    } else {
                        jQuery('.ajaxerror').show();
                    }
                    
                                        
                    location.href = "#modal";
                },
                error : function( response ) {
                    
                    jQuery('.ajaxerror').show();
                    
                    location.href = "#modal";
                }
            });
        },
        //contact form submit handler
        sumateFormSubmit: function (nameForm) {
            if (this.validate(nameForm) === false) {
                this.sendAjaxForm(nameForm);
            }
            return false;
        },
        bindEvents: function (nameForm) {    
            this.sumateFormSubmit(nameForm);
        },
        init: function (nameForm) {
            this.bindEvents(nameForm);
            return this;
        }
    };
    

    getCountries();    
   

    jQuery( document ).on( 'click', '.remodal-confirm', function(e) {  
       jQuery('.successformPersonas').hide();
       jQuery('.successformEntidades').hide();
    });
    
});

function getCountries() {

    var your_country = jQuery(".your-country");
    var html = '';
    
    jQuery.getJSON(forms_sumate_url.url_countries_json, function (json) {        
        for (var key in json) {
            if (json.hasOwnProperty(key)) {
                var item = json[key];
                
                
                if ( item.name === 'España' && getLang() !== 'en') {
                    //$('option[text=' + item.name + ']').attr('selected','selected');
                    jQuery(".your-country option:contains(" + item.name + ")").attr('selected', 'selected');
                }  
                
                
                html +='<option value="' + item.code + '">' + item.name + '</option>';                           
            }
        }        
        var newOption = jQuery(html);
        newOption.insertAfter('.your-country option[value=""]');
    });
    
}

function getLang() {
    // Cogemos idioma
    jQuery.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);        
        if (results !== null) return results[1];
        
        return 'es';
    };
   
    return jQuery.urlParam('lang');
}

function uniqId() {
  return Math.round(new Date().getTime() + (Math.random() * 100));
}
0

It is not right

location.href = "#modal";

when you need to change hash you need to use window.location.hash = 'modal'

but you have another problem!

You need to initialize your plugin and use its api

Instead of this location.href = "#modal"; you need to use:

var inst = jQuery('[data-remodal-id=modal]').remodal(); 
inst.open()
| improve this answer | |
  • It worked! Thanks a lot, Unbywyd. I really appreciate your help – Tomas Canale Sep 10 at 19:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.