Ho trovato questo script che permette di caricare un form (pagina html esterna) direttamente in un overlay.
Io sto lavorando ancora in ASP ma non capisco in base al file come fare in modo che una volta cliccato sul "submit" al di là di rielaborare i dati in ASP (nessun problema) il messaggio di risposta venga visualizzato nel medesimo overlay.
Lo script originale è in PHP - http://dev.jonraasch.com/contact-pop/examples/
Pagina ASP
codice:
<%
formHtml = ""
nome = "fabio"
cognome = "lantier"
email ="fabiolantier@yahoo.it"
azione = Request("azione")
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
<div id="contactForm"><form action ="form.asp" method="post">
<%IF azione = "ok" then
%>
<p id="contact-pop-error" class="formItem"><%Response.write "grazie"%></p>
<%else %>
<input type="hidden" name="azione" value="ok" />
<input type="hidden" name="httpReferer" value="<%=Request.ServerVariables ("HTTP_REFERER")%>" />
<div class="formItem">
<label>Name:</label>
<input type="text" name="name" class="inputText" value="<%=nome &" "& cognome%>" size="35" />
</div>
<div class="formItem">
<label>Email:</label>
<input type="text" name="email" class="inputText" value="<%=email%>" size="35" />
</div>
<div class="formItem">
<label>Message:</label>
<textarea name="message" class="textarea" rows="7" cols="38">$postedMessage</textarea>
</div>
<div class="formItem">
<input type="submit" name="submit" value="invia" class="submit" /> $cancelLink
</div>
<%end if %>
</form> </div>
</body>
</html>
codice:
/* ContactPop jQuery Plugin
*
* By Jon Raasch
* http://jonraasch.com
*
* Copyright (c)2009 Jon Raasch. All rights reserved.
* Released under FreeBSD License, see readme.txt
* Do not remove the above copyright notice or text.
*
* For more information please visit:
* http://jonraasch.com/blog/contact-pop-jquery-plugin
*/
ContactPop = {
/************ config **************/
// make sure to keep the trailing comma after each of these variable definitions
replaceHref : '/form.asp', // can be array or string of hrefs or nothing if you want to use jQuery selectors (below)
formPhpLocation : '/Contact-Pop/form.asp', // relative path to the backend contact form
pathToContactPop : '/Contact-Pop', // relative path to the Contact-Pop directory
contactHeadline : 'Contact Us',
headerBgColor : '#777777', // background color of overlay panel header
overlayFadeIn : 600, // overlay fade in speed (milliseconds)
overlayFadeOut : 500, // overlay fade out speed (milliseconds)
overlayEasing : '', // if you install the easing plugin (http://gsgd.co.uk/sandbox/jquery/easing/), the info goes here, example: 'easeInOutQuad'
openButtonSelector : '', // set this to use jQuery selectors in addition to the hrefs - string (ex: '.contact, #contact-link')
closeButtonSelector : '.close-overlay', // this works with any jQuery selector - string (ex: '#close-button, .close')
resetFormEachTime : 0, // resets the form if the overlay is hidden and shown again
fadeOverlayIE : 0, // default off - in IE 7/8 alpha transparency flashes black when ffaded
fadeOverlayIE6 : 0, // default off - for performance
/********** end config ************/
obj : {},
formFields : {},
submitEvent : 0,
overlayFade : 1,
appendOverlay : function() {
// append overlay and panel divs
ContactPop.obj.overlay = jQuery('<div id="contact-pop-overlay"></div>').appendTo( jQuery('BODY') );
ContactPop.obj.panelWrapper = jQuery('<div id="contact-pop-panel-wrapper"></div>').appendTo( ContactPop.obj.overlay );
ContactPop.obj.panel = jQuery('<div id="contact-pop-panel"></div>').appendTo( ContactPop.obj.panelWrapper );
// append panel headline
ContactPop.obj.panelHeadline = $( '<h2 id="contact-pop-header">' + ContactPop.contactHeadline + '</h2>') . appendTo( ContactPop.obj.panel );
// set panel headline background color
if ( ContactPop.headerBgColor != '#777777' ) ContactPop.obj.panelHeadline.css( 'backgroundColor', ContactPop.headerBgColor );
// append panel header close button
ContactPop.obj.panelHeadline.append( '<a href="#" class="close-overlay">X</a></h2>' );
// append form
ContactPop.obj.form = jQuery('<form action="' + ContactPop.formPhpLocation + '" method="get" id="contact-pop-form"></div>').appendTo( ContactPop.obj.panel );
// append loading graphic
ContactPop.obj.loading = jQuery('<div id="contact-pop-loading-gif-wrapper"></div>').appendTo( ContactPop.obj.panel );
ContactPop.obj.loading.append('<img src="' + ContactPop.pathToContactPop + '/contact-pop/img/ajax-loader.gif" alt="" id="contact-pop-loading-gif" />');
},
getFormContent : function() {
// grab form html using jQuery's AJAX API
jQuery.get( ContactPop.formPhpLocation, { 'ajaxForm' : 1 }, function(html) {
if ( html ) {
ContactPop.obj.loading.fadeOut(200);
ContactPop.obj.form.html( html );
ContactPop.attachFormEvents();
}
});
},
attachFormEvents : function() {
// close buttons
jQuery( ContactPop.closeButtonSelector, ContactPop.obj.panel).click( function(ev) {
ev.preventDefault();
ContactPop.hideOverlay();
});
// attach submit event each time for IE
if ( jQuery.browser.msie ) {
jQuery('input.submit', ContactPop.obj.form).click( function(ev) {
ev.preventDefault();
ContactPop.submitForm();
});
}
// only attach submit event once for other browsers
else if ( !ContactPop.submitEvent ) {
ContactPop.obj.form.submit( function(ev) {
ev.preventDefault();
ContactPop.submitForm();
});
ContactPop.submitEvent = 1;
}
},
checkOverlayFade : function() {
if ( $.browser.msie && !ContactPop.fadeOverlayIE && !( $.browser.version < 7 && ContactPop.fadeOverlayIE6 ) ) return false;
else return true;
},
showOverlay : function() {
// if first time append the overlay and get the form content
if ( typeof(ContactPop.obj.overlay) == 'undefined' ) {
ContactPop.appendOverlay();
ContactPop.getFormContent();
}
else if ( ContactPop.resetFormEachTime ) ContactPop.getFormContent();
if ( ContactPop.overlayFade ) ContactPop.obj.overlay.fadeIn( ContactPop.overlayFadeOut, ContactPop.overlayEasing );
else ContactPop.obj.overlay.show();
},
hideOverlay : function() {
if ( ContactPop.overlayFade ) ContactPop.obj.overlay.fadeOut( ContactPop.overlayFadeIn, ContactPop.overlayEasing );
else ContactPop.obj.overlay.hide();
},
submitForm : function() {
// add form fields to array
jQuery('input, select, textarea', ContactPop.obj.form).each( function() {
ContactPop.addFormField( jQuery(this) );
});
// set the ajaxForm post value
ContactPop.formFields['ajaxForm'] = 1;
// fade in the loading graphic
ContactPop.obj.form.fadeOut(200);
ContactPop.obj.loading.fadeIn(200);
// post the form with jQuery's AJAX API
jQuery.post( ContactPop.formPhpLocation, ContactPop.formFields, function(html) {
if ( html ) {
ContactPop.obj.form.html( html );
ContactPop.obj.loading.fadeOut(200);
ContactPop.obj.form.fadeIn(200);
ContactPop.attachFormEvents();
}
});
},
addFormField : function( $field ) {
var fieldName = $field.attr('name');
if ( fieldName ) ContactPop.formFields[ fieldName ] = $field.val();
},
init : function() {
var anchorSelector = '';
// force array
if ( typeof( ContactPop.replaceHref ) != 'object' ) ContactPop.replaceHref = [ ContactPop.replaceHref ];
// add anchor selectors
for ( var i = 0; i < ContactPop.replaceHref.length; i++ ) {
if ( ContactPop.replaceHref[i] ) anchorSelector += 'a[href=' + ContactPop.replaceHref[i] + '], ';
}
// add additional jQuery selectors
if ( ContactPop.openButtonSelector ) anchorSelector += ContactPop.openButtonSelector;
else anchorSelector = anchorSelector.substr(0, anchorSelector.length - 2);
// define ctas and click event
ContactPop.obj.ctas = jQuery(anchorSelector);
ContactPop.obj.ctas.click( function(ev) {
ev.preventDefault();
ContactPop.showOverlay();
});
// determine if fading overlay or just hide/showing
ContactPop.overlayFade = ContactPop.checkOverlayFade();
// preload overlay image - keep this in the init() function so the rest of the page loads first
var overlayImg = new Image();
if ( jQuery.browser.msie && jQuery.browser.version < 7 ) overlayImg.src = ContactPop.pathToContactPop + '/img/overlay-ie6.png';
else overlayImg.src = ContactPop.pathToContactPop + '/img/overlay.png';
}
};
jQuery(function() {
// initiate ContactPop once the page loads
ContactPop.init();
});