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));
}
