Documentation You are here: start » integration » asp.net » forms

Table of Contents

type:
integration
system:
ASP.Net
name:
jQuery Fake Forms for ASP.NET
description:
Workaround for ASP.NET's penchant to wrap the entire HTML body in a form tag, thus breaking all javascript that relies on forms' submit events.
tag:
javascript, forms
date:
2010-03-12

ASP.NET "Fake" Forms

Please note: The code on this page is submitted by members of the FoxyCart community, and may not verified by FoxyCart.com LLC in any way, shape, or form. Please double check the code before installing. If you need help with it please post in our forum, but if we cannot offer assistance (due to unfamiliarity with this particular system or language) we apologize in advance.

Description

Because ASP.NET wraps the entire <body> section in a <form> tag, you cannot use forms in your pages, nor will the FoxyCart javascript behave as desired.

Installation

v2.0

Coming soon.

v0.7.0 — v1.1

Copy or download the following code and save it on your server as form_fake.js. Put a <script> tag referencing it in the <head> section of your HTML, after your jQuery or foxycart.complete.js (or foxycart.js) call:

form_fake.js
function form_fake(link) {
	link_parent = jQuery(link).closest('div.foxycart_form');
	if (link_parent.length < 1) return false;
	// console.info(link);
	// console.info(link_parent);
	href = 'https://' + storedomain + '/cart?' + jQuery(link_parent).find('*').serialize();    	     
	jQuery(link).attr('href', href);
	// console.info(jQuery(link).attr('href'));
	return true;
}
 
jQuery(document).ready(function($) {
	// Initialize it on pageload
	form_fake($('div.foxycart_form a.foxycart_submit'));
	// Update it on every change
	$('div.foxycart_form *').change(function(){
		form_fake($(this).closest('div.foxycart_form').find('a.foxycart_submit'));
	});
});
 
// Ensure it gets run prior to a cart-add request
fcc.events.cart.preprocess.add(function(e){
		form_fake(e);
});
  1. Where you would have a <form> element, make it a div.foxycart_form element. Remove the form-specific attributes like action, method, and accept-charset.
  2. Change your input[type=submit] elements (or anything comparable) to a.foxycart_submit.
  3. Make sure your a.foxycart_submit link does not have any parameters on it. Anything that the link itself has will be blown away when the script runs. All values must be in input or select or other form elements.
  4. Make sure your HTML is valid. Invalid HTML can cause serious problems for javascript.
  5. Test.
  6. Test some more. This code has been tested in basic situations, but due to the infinite possibilities nobody can guarantee it works as expected but you.

So your HTML should look something like this: 

	<div class="foxycart_form">
		<input type="hidden" name="name" value="Seats of CRM" />
 
		<input type="hidden" name="discount_quantity_amount" value="Volume Discount{10-5}" />
		<input type="hidden" name="price" value="54.99" />
		<select name="sub_frequency">
			<option value="1m">Monthly</option>
			<option value="1y{p:604.89}">Annual - 1st Month Free</option>
		</select>
		<a href="https://YOURDOMAIN.foxycart.com/cart" class="foxycart_submit">Submit</a>
	</div>

v0.6.0 and prior

Copy or download the following code and save it on your server as form_fake.js. Put a <script> tag referencing it in the <head> section of your HTML, after your jQuery or foxycart_includes.js (or foxycart.js) call:

form_fake.js
function form_fake(link) {
	link_parent = jQuery(link).closest('div.foxycart_form');
	if (link_parent.length < 1) return false;
 
	// console.info(link);
	// console.info(link_parent);
	href = 'https://' + FoxyDomain + '/cart?' + jQuery(link_parent).find('*').serialize() + fc_AddSession();
 
	jQuery(link).attr('href', href);
	// console.info(jQuery(link).attr('href'));
}
 
jQuery(document).ready(function($){
	form_fake($('div.foxycart_form a.foxycart_submit'));
 
	$('div.foxycart_form a.foxycart_submit').click(function(){
		form_fake($(this));
	});
	$('div.foxycart_form *').change(function(){
		form_fake($(this).closest('div.foxycart_form').find('a.foxycart_submit'));
	});
});
  1. Change all your form.foxycart elements to div.foxycart_form elements. Remove the form-specific attributes like action, method, and accept-charset.
  2. Change your input[type=submit] elements (or anything comparable) to a.foxycart.foxycart_submit.
  3. Make sure your a.foxycart_submit link does not have any parameters on it. Anything that the link itself has will be blown away when the script runs. All values must be in input or select or other form elements.
  4. Make sure your HTML is valid. Invalid HTML can cause serious problems for javascript.
  5. Test.
  6. Test some more. This code has been tested in basic situations, but due to the infinite possibilities nobody can guarantee it works as expected but you.

So your HTML should look something like this: 

	<div class="foxycart_form">
		<input type="hidden" name="name" value="Seats of CRM" />
 
		<input type="hidden" name="discount_quantity_amount" value="Volume Discount{10-5}" />
		<input type="hidden" name="price" value="54.99" />
		<select name="sub_frequency">
			<option value="1m">Monthly</option>
			<option value="1y{p:604.89}">Annual - 1st Month Free</option>
		</select>
		<a href="https://YOURDOMAIN.foxycart.com/cart" class="foxycart foxycart_submit">Submit</a>
	</div>

Page Tools

Site Tools