The case: http://santz.net/index.contacto.html
Target: The "website" must open a dialog/modal box/modal window after successful form submission.
Issue: The form submits successfully but the dialog/modal box/modal window doesn't open (rarely, it does open if you make another click...)
The idea is quite simple! When the user submits the form, a dialog pops up instantly!
CODE:
The form:
<form id="contact-form" name="contact-form" class="p25" action="contact.php" method="post">
<fieldset>
<label class="name">
<input class="input" type="text" value="Nombre" onfocus="if(this.value == 'Nombre'){this.value = '';}" onblur="if(this.value == ''){this.value='Nombre';}" name="php_name" />
</label>
<label class="email">
<input class="input" type="email" value="Email" onfocus="if(this.value == 'Email'){this.value = '';}" onblur="if(this.value == ''){this.value='Email';}" name="php_email" />
</label>
<label class="phone">
<input class="input" type="tel" value="Teléfono" onfocus="if(this.value == 'Teléfono'){this.value = '';}" onblur="if(this.value == ''){this.value='Teléfono';}" name="php_phone" />
</label>
<label class="message">
<textarea class="textarea" onfocus="if(this.value == 'Mensaje'){this.value = '';}" onblur="if(this.value == ''){this.value='Mensaje';}" name="php_message">Mensaje</textarea>
</label>
<div class="buttons-wrapper ml20">
<div class="submit-comment">
<span></span>
<input type="reset" value="Cancelar">
</div>
<div class="submit-comment ml25">
<span></span>
<input type="submit" value="Enviar" id="clicker">
</div>
</div>
</fieldset>
</form>
The Script and attached scripts
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/scripts.js"></script>
<script type="text/javascript" src="js/popupscript.js"></script>
<script type="text/javascript">
$(function() {
$('#contact-form').submit(function() {
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $(this).serialize(),
success: function() {
$('#popup-wrapper').modalPopLite({
openButton: '#clicker',
closeButton: '#close-btn'
});
}
});
$('#contact-form')[0].reset();
return false;
});
});
</script>
The modal Box Script (the one that came with the plugin I'm using: http://mywebdeveloperblog.com/my-jquery-plugins/modalpoplite)
(function ($) {
var popID = 0;
$.fn.modalPopLite = function (options) {
var options = $.extend({}, { openButton: "modalPopLite-open-btn", closeButton: "modalPopLite-close-btn", isModal: false, callBack: null }, options);
return this.each(function () {
popID++;
var thisPopID = popID;
var isOpen = false;
obj = $(this);
triggerObj = options.openButton;
closeObj = options.closeButton;
isReallyModel = options.isModal;
//alert("winH: " + winH + "top: " + top + "objH: " + objH);
obj.before('<div id="modalPopLite-mask' + thisPopID + '" style="width:100%" class="modalPopLite-mask" />');
obj.wrap('<div id="modalPopLite-wrapper' + thisPopID + '" style="left: -10000px;" class="modalPopLite-wrapper" />');
obj.addClass('modalPopLite-child-' + thisPopID);
$(triggerObj).live("click", function (e) {
e.preventDefault();
var winW = $(window).width();
var winH = $(window).height();
var objW = $('.modalPopLite-child-' + thisPopID).outerWidth();
var objH = $('.modalPopLite-child-' + thisPopID).outerHeight();
var left = (winW / 2) - (objW / 2);
var top = (winH / 2) - (objH / 2);
$('#modalPopLite-mask' + thisPopID).css('height', winH + "px");
$('#modalPopLite-mask' + thisPopID).fadeTo('slow', 0.6);
//$('#modalPopLite-wrapper' + thisPopID).hide();
$('#modalPopLite-wrapper' + thisPopID).css({ 'left': left + "px", 'top': top });
$('#modalPopLite-wrapper' + thisPopID).fadeIn('slow');
isOpen = true;
});
$(closeObj).live("click", function (e) {
e.preventDefault();
$('#modalPopLite-mask' + thisPopID).hide();
//$('#modalPopLite-wrapper' + thisPopID).hide();
$('#modalPopLite-wrapper' + thisPopID).css('left', "-10000px");
isOpen = false;
if (options.callBack != null) {
options.callBack.call(this);
}
});
//if mask is clicked
if (!isReallyModel) {
$('#modalPopLite-mask' + thisPopID).click(function (e) {
e.preventDefault();
$(this).hide();
//$('#modalPopLite-wrapper' + thisPopID).hide();
$('#modalPopLite-wrapper' + thisPopID).css('left', "-10000px");
isOpen = false;
if (options.callBack != null) {
options.callBack.call(this);
}
});
}
$(window).resize(function () {
if (isOpen) {
var winW = $(window).width();
var winH = $(window).height();
var objW = $('.modalPopLite-child-' + thisPopID).outerWidth();
var objH = $('.modalPopLite-child-' + thisPopID).outerHeight();
var left = (winW / 2) - (objW / 2);
var top = (winH / 2) - (objH / 2);
$('#modalPopLite-wrapper' + thisPopID).css({ 'left': left + "px", 'top': top });
}
});
});
};
$.fn.modalPopLite.Close = function (id) {
$('#modalPopLite-mask' + id).hide();
//$('#modalPopLite-wrapper' + id).hide();
$('#modalPopLite-wrapper' + thisPopID).css('left', "-10000px");
if (options.callBack != null) {
options.callBack.call(this);
}
};
$.fn.modalPopLite.ShowProgress = function () {
$('<div class="popBox-ajax-progress"></div>').appendTo("body")
};
$.fn.modalPopLite.HideProgress = function () {
$('.popBox-ajax-progress').remove();
};
})(jQuery);
The PHP
<?php
$field_name = $_POST['php_name'];
$field_email = $_POST['php_email'];
$field_phone = $_POST['php_phone'];
$field_message = $_POST['php_message'];
$field_sender = 'alpha@hotmail.com';
$mail_to = 'omega@hotmail.com';
$subject = 'Mensaje via Santz.net de '.$field_name;
$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Phone: '.$field_phone."\n";
$body_message .= 'Message: '.$field_message;
$headers = 'From: '.$field_sender."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";
$mail_status = mail($mail_to, $subject, $body_message, $headers);
if ($mail_status) { ?>
<script language="javascript" type="text/javascript">
alert('Gracias por contactarse, en breve, me pondre en contacto.\n\nSantz Design | www.santz.net');
window.location = 'index.contacto.html';
</script>
<?php
}
else { ?>
<script language="javascript" type="text/javascript">
alert('El envio fallo. Por favor, envie un mail directamente a info@santz.net');
window.location = 'index.contacto.html';
</script>
<?php
}
?>
In this case, move the dialog function outside of the submit function:
$(function() {
$('#popup-wrapper').modalPopLite({
openButton: '#clicker',
closeButton: '#close-btn'
});
$('#contact-form').submit(function() {
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $(this).serialize(),
success: function() {
$('#contact-form')[0].reset();
}
});
return false;
});
});