Note that there are some explanatory texts on larger screens.

plurals
  1. POClose Colorbox iframe after form submit and then redirect parent page
    primarykey
    data
    text
    <p>I've been trying to figure this one out for a couple of weeks now with only mediocre results. Due to my lack of knowledge of Jquery and minimal Javascript knowledge I have cobbled together a few bits of code found around the net and I'm sure it is all wrong. I am using Colorbox to display a product with an add to cart button in an iframe(both the parent and iframe are pages coming from my server). My desired results are:</p> <p><strong>(edited for clarity)</strong></p> <ol> <li>to have the add to cart button pass the form data to the parent on submit.</li> <li>close the Colorbox iframe after passing form.</li> <li>Parent frame submits form.</li> </ol> <p>So far I have used the following code for the form in my iframe:</p> <pre><code>&lt;form name="cart_quantity" action="index.php?action=add_product" method="post" enctype="multipart/form-data" onSubmit="parent.$.fn.colorbox.close();"&gt; &lt;input type="hidden" name="qty" value="1" /&gt; &lt;input type="hidden" name="id" value="7" /&gt; &lt;input type="hidden" name="attri" value="17" id="attri-17" /&gt; &lt;input class="cssButton button" type="submit" value="ADD TO CART"/&gt; &lt;/form&gt; </code></pre> <p>My script calling colorbox on the parent page is:</p> <pre><code>&lt;script&gt; function lightbox(){ $.fn.colorbox({ iframe:true, onClosed:function(){ window.location = 'index.php?main_page=shopping_cart'; }, href:"./index.php?main_page=product_info&amp;id=7"}); } &lt;/script&gt; </code></pre> <p>So the problems so far:</p> <p>When the form is submitted Colorbox closes and the form submits only half of the time(partial success rate). I've tried to follow the posted data with firebug in an attempt to see if it's posting everytime, but because it is coming from an iframe, I can't seem to see anything. </p> <p>if anybody can help me sort this out with the proper code, I'd greatly appreciate it!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COThanks for the time spent writing up your request; maybe it's me but I'm still confused. In particular "have the add to cart button submit to the parent page" doesn't work for me. Consider breaking it down further: Could you use the iframe box to capture the **user intent** and simply close passing that intent to the parent, which then actually does the submit? Because the iframe is a child you have full access to the parent's DOM and memory. Also, please clarify if your markup is the iframe or the parent.
      singulars
    2. CO@Kevin M, I can see how my description can be confusing, I was really trying hard to put into words the goal I am attempting to accomplish. I have edited my code to show which is parent or iframe. Your comment about passing the user intent(which I assume you mean form data?) from iframe to the parent on close, and then having the parent submit the data is a great description of my goal. It definitely makes it easier to understand. Now where would I start in attempting to make this happen properly.
      singulars
    3. CO@Kevin M, thinking about this more, would I start by changing the onSubmit in my form to perhaps an onClick that will call a script of some kind on the parent; that would then close the Colorbox window and submit the form?
      singulars
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload