Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Jquery open popbox if gform fails WordPress

  • SOLVED

I have a few forms that are inside of a jquery popbox plugin(found here https://github.com/gristmill/jquery-popbox). The problem I am running into is that if the form has errors (e.g. improper email, or passwords don't match etc.) the page reloads with the popup closed, so the user does not know that the form had errors. If the user re-opens the popup they can see the errors.

What I am essentially looking for is a function that does something along the lines of

if gform validation fails then onpage load open this popup

The one problem I ran into was that if the function simply executes the popup script then it will open all of the popups on the page (there is almost always atleast 2). I want the function to only open the popup with errors.

I believe this is the right gform hook: http://www.gravityhelp.com/documentation/page/Gform_field_validation

The site can be seen at hookahi.com -- example forms are the 'join' link in the top right corner, or get email updates in the footer.

Please note that I am in the northeast US and am without power, so my responses may be slow.

Answers (3)

2012-11-04

Christianto answers:

Hi Kyle,

Please try my code, I use cookie to remember the last clicked popbox for the form element.
Replace your code to start the popbox

jQuery(document).ready(function(){
jQuery('.popbox').popbox();
});


/**
* jQuery Cookie
*/
(function(e,t,n){function i(e){return e}function s(e){return decodeURIComponent(e.replace(r," "))}var r=/\+/g;var o=e.cookie=function(r,u,a){if(u!==n){a=e.extend({},o.defaults,a);if(u===null){a.expires=-1}if(typeof a.expires==="number"){var f=a.expires,l=a.expires=new Date;l.setDate(l.getDate()+f)}u=o.json?JSON.stringify(u):String(u);return t.cookie=[encodeURIComponent(r),"=",o.raw?u:encodeURIComponent(u),a.expires?"; expires="+a.expires.toUTCString():"",a.path?"; path="+a.path:"",a.domain?"; domain="+a.domain:"",a.secure?"; secure":""].join("")}var c=o.raw?i:s;var h=t.cookie.split("; ");for(var p=0,d=h.length;p<d;p++){var v=h[p].split("=");if(c(v.shift())===r){var m=c(v.join("="));return o.json?JSON.parse(m):m}}return null};o.defaults={};e.removeCookie=function(t,n){if(e.cookie(t)!==null){e.cookie(t,null,n);return true}return false}})(jQuery,document);
//*** End jQuery Cookie ***

jQuery(document).ready(function($){
var ele = $('.popbox');

/* initialize popbox */
ele.popbox();

/* save clicked index popbox that contain the form */
ele.each(function(index){
$(this).find('.open').click(function(e){
e.preventDefault();
$.cookie('pb_index', index);
});
});

var pb_index = $.cookie('pb_index');
if($('.gform_validation_error').length > 0 && pb_index != 'none'){

// find the form by looking at cookie and open it
ele.eq(pb_index).attr('id','to-this').find('.open').click();

// go to the marked error form
window.location.hash = 'to-this';

// clean up cookie and id
$.cookie('pb_index', 'none');
$('.popbox').removeAttr('id');

}
});


It will open the form if error exists, base on last saved popbox index.
Optionally you can separate the jQuery cookie to separate js file instead of including it inline..


Kyle comments:

Thanks for the reply, I think the idea of saving the most recent popbox in a cookie is a good idea. I tried the code, but it did not work.

I had inserted the whole code, as is, inside <script type='text/javascript'></script> to execute in the footer. Was this correct?


Christianto comments:

There are error syntax,

On your site the code:
jQuerythis).find('.open').click(function(e){
should be
jQuery(this).find('.open').click(function(e){

jQuerythis) vs jQuery(this)

Yes, you can copy paste entire code as is, inside <script>
I already pass the jQuery object as $ inside ready() function, so you don't need to change $ to jQuery :)

jQuery(document).ready(function(<strong>$</strong>){ });


Kyle comments:

Good pickup, I had missed that thanks. I had only changed it because I thought that may be a conflict, I changed it back to yours

I made corrections, except now I am not able to open the popbox , it automatically closes the window as soon as it opens. Do you know why this may be happening?


Christianto comments:

There are 2 other jQuery popbox initialize code, you can remove it..
jQuery(document).ready(function(){
jQuery('.popbox').popbox();
});


Like I said before you can replace it with my code,
I've already put the popbox init code on my code above, so you don't need the other..

.popbox init on my code:

var ele = $('.popbox');

/* initialize popbox */
ele.popbox();


Kyle comments:

Oh okay, I see what you meant, I misunderstood.

Works perfectly! Thanks for your help, that is a great solution

2012-11-04

Dbranes answers:

Hi ktrusak

Here is an alternate way to do it:

1) install the plugin

[[LINK href="http://wordpress.org/extend/plugins/just-the-page/"]]http://wordpress.org/extend/plugins/just-the-page/[[/LINK]]

2) create a single page with your gform shortcode on it
fx. http://example.com/join-form/

3) click on the "just the page" checkbox for the "join-form" page

4) include the http://example.com/join-form/ in an iframe within your jquery-popup

5) maybe include a close button inside the jquery-popup.


Best of luck with the power issue.


Kyle comments:

Thanks for the reply and wishes. I am trying to avoid iframes right now because of the mobile compatibility issues.

2012-11-04

Arnav Joy answers:

Since your form opens up on click event so you have to call this event whenever page reloads and if gform has error in it.

so you have to find out on page load if gform has error in it (i think it adds class to its form ) and if it has then open the form which has error in it using the same click event.