0

EDIT: I recently learned that this problem is actually two separate issues: 1) Using a script to close parent elements at the necessary junctures, and 2) Ensuring that the necessary functions were all called and completed in the correct sequence. I figured out two methods for closing the parent elements which I've included below. The 2nd issue is addressed here: Calling jQuery function in php (or modifying javascript so php runs the remaining code)

Original Question

I have 2 functions which I need to call once a form is validated and submitted, however I've been unsuccessful at inserting these functions into my script without preventing another function from being completed (either in the javascript or the php).

How can I integrate these functions to close parent items (an iframe and a notification to new users) into the script and/or call them from php after the form is validated and submitted?

New functions:

parent.close_field('notice');
parent.$.fancybox.close();

Existing Javascript

var $custInfo = $("#customer_info");
  $(document).ready(function () {
    var validator = $custInfo.validate({
        rules: {..  },
        messages: {..},
        errorLabelContainer: "#messageBox",
        submitHandler: function () {  
            $custInfo.ajaxSubmit({               
            });
        }
    });                 
    $custInfo.find("input[name=gender]").change(function () {
        if ($(this).val() == "male") {
            $custInfo.submit();
        }
    });
});

I'm using Fancybox2. I've also tried other methods which require adding attributes to the form tag, however those circumvent the script entirely.

Community
  • 1
  • 1
Chaya Cooper
  • 2,566
  • 2
  • 38
  • 67

2 Answers2

0

I recently learned that this problem was actually 2 separate issues: 1) Using a script to close parent elements at the necessary junctures, and 2) Ensuring that the necessary functions were all called and completed in the correct sequence.

I figured out two methods for closing the parent elements which I've included below. The 2nd issue is addressed here: Calling jQuery function in php (or modifying javascript so php runs the remaining code)

Methods I used for closing the parent elements

I figured out two ways to close the parent elements. I used Method 1 to close it when the form was submitted and Method 2 for those circumstances where I needed to close items onclick (i.e. if the user navigates to specific pages)

Method 1

In my particular example I needed to close 'notice' for everyone, but only close the iframe for new users who were male, so I added this to the function: 

submitHandler: function () {
            $custInfo.ajaxSubmit({
            success: function () {
if ($('input[name=gender][value=female]').is(':checked')){                                                      
        parent.close_field('notice');
        window.location.href="page2.html";                                   
        }                             
        else if ($('input[name=gender][value=male]').is(':checked')) {
        parent.close_field('notice');
        parent.$.fancybox.close();
        alert("This service is not yet available for men, but we'll be sure to send an invitation as soon as it is");                             
        }
       }
     });

Method 2

JS

function close_parent_items() {
     parent.close_field('notice');
     parent.$.fancybox.close();
}

HTML

onclick="close_parent_items();"
Community
  • 1
  • 1
Chaya Cooper
  • 2,566
  • 2
  • 38
  • 67
0

Simple solution: add this in your form tag

target="_parent"

like 

<form method="post" action="your_action_file" target = "_parent" >
</form>

It works for me.

AMalik
  • 11
  • 1