I recently asked a similar question Close Colorbox iframe after form submit and then redirect parent page but have since changed direction a little so I thought best to create a new post.
I have an add to cart form inside of an iframe(both my parent and iframe reside on the same server/directory). On submit I would like to pass the form to a script on the parent page. the script will close the iframe(colorbox) window and submit the form, but there is one exception; I have two versions of my site, one for standard browsers which uses an iframe to display the the product, and a mobile site which directly opens the product page and works fine as-is. Both use the same database where the info is stored, which means the forms are always the same, So I need a conditional, something along the lines of if this page is in an iframe (pass form to script on parent for submission) else (submit form as-is) . I have found this snippet here on stackoverflow that I believe should work for the conditional:
if (top === self) { not in a frame } else { in a frame }
I have three different forms, each is on a separate product page:
The most basic:
<form name="add_cart" action="index.php?action=add" method="post"
enctype="multipart/form-data">
<input type="hidden" name="quantity" value="1" />
<input type="hidden" name="products_id" value="1" />
<input type="hidden" name="id[1]" value="1" id="att-1-1" />
<input type="hidden" name="id[2]" value="2" id="att-2-2" />
<input class="cssButton button" type="submit" value="Add Product"/>
</form>
Then one with multiple checkbox selections:
<form enctype="multipart/form-data" method="post" action="index.php?action=add"
name="cart_quantity">
<input type="hidden" value="1" name="quantity">
<input type="hidden" value="3" name="products_id">
<input id="option-8-1" type="checkbox" value="1" name="id[8][1]">
<input id="option-8-2" type="checkbox" value="2" name="id[8][2]">
<input id="option-8-3" type="checkbox" value="3" name="id[8][3]">
<input id="option-8-4" type="checkbox" value="4" name="id[8][4]">
<input class="cssButton button" type="submit" value="Add Selected Items" >
</form>
And a third with a drop down selection for a single option:
<form enctype="multipart/form-data" method="post" action="index.php?action=add" name="cart_quantity">
<input type="hidden" name="quantity" value="1" />
<input type="hidden" name="products_id" value="3" />
<input type="hidden" name="id[6]" value="9" id="att-6-9" />
<select name="id-7" id="options">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
I'm looking for any help or guidance into getting this to work. While I have a better grip on javascript, Jquery would be fine, Anything is appreciated.
You don't need a conditional, just use javascript unobtrusively, ie if javascript is enabled, javascript stops (hijacks) the form submission, sends the form data to parent and closes the iframe - if javascript is not enabled, the form submits normally: eg with jQuery
<form id="my-form">
</form>
<script>
function formSubmissionHandler(){
// handle form submission
}
$(document).ready(function(){
$('#my-form').submit(function(){
formSubmissionHandler();
return false;
});
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.