Making Some Elements Inactive with jQuery BlockUI Plugin + Tweaks
Hello everyone,
When a contact form has been sent, a second form comes up on my website. I am attempting to set it up so that after the e-mail is sent on the first form, the 2nd form will come up while the rest of the page is made inactive by making use of the jQuery BlockUI plugin. The way I'm going to need to do this is to target the entire container div for the blocking of element activity, and I haven't figured out why I'm not able to see the 2nd form when it is placed outside of the container. The other part of this is tweaking the call to the blockUI() method so that white boxes don't appear after it executes as well as getting rid of the default "Please Wait..." message and disabling the hourglass/working status that a user's mouse would show when it is hovering over the blocked content (as if something is loading when nothing else will change on the page). Hopefully someone knows how to tweak this so that I can achieve what I want. I will pop on over to the CSS forum and see if someone can help me figure out how I can see the 2nd form/other content when it is placed outside of the container div.
Screenshot of what it looks like
jQuery:
Code:
function showResult(response){
if (response.indexOf("Submission Successful") != -1){
$("#confirmform").css("display","block");
$("#middle").block({css: {backgroundColor: '#E0EBEB'}});
$("#leftside").block({css: {backgroundColor: '#E0EBEB'}});
$("#rightside").block({css: {backgroundColor: '#E0EBEB'}});
} else if (response.indexOf("Invalid E-mail") != -1){
} else if (response.indexOf("Nothing in Box") != -1){
} else {
//do nothing
}
}
My website: World Review Group
;)
Disabling/Making Elements Inactive When a Form is Shown
Hello everyone,
I have been looking for a way to put a gray, opaque mask over the entire body and disable all the elements inside the page save one form and a div where the results are posted from that form on the home page of my website. It is my goal to have these actions triggered after a user enters a valid e-mail address on the first input form, after which the second form is displayed on the screen. I have been researching the jQuery BlockUI plugin to achieve this, but I don't think this will work because I intend on placing the gray mask over the entire body of the page, leaving only one or two divs active and enabled, but maybe someone here is familiar with how I can achieve this with the blockUI plugin (making an exception to leave the second form active without a gray mask over it). Can someone offer some advice on how I can get this done? :eek:
Here is a screenshot that I manipulated that shows what I'm trying to do.
My website: World Review Group
1st Attempt at Modifying Example Script
Well, I'm certainly learning a lot, but at the moment, it's a bit much (my head hurts). :injured:
Here's my current code for this, and I'll explain what the current behavior/outcome is below.
emailbox.js
Code:
//removes "your e-mail" default value in input selection when user activates input field
function input_focus(obj){
if ( obj.value == obj.defaultValue ){
obj.value = ""
}
}
//resets default value in input field if it is left empty
function input_reset(obj){
if (!obj || obj.length === 0)
obj.value = obj.defaultValue;
}
//this is the function called from the onsubmit attribute of the first form
function firstSubmitProcessor(event){
event.preventDefault();
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: $(this).serialize(),
success: function(response){
testFirstResults(response);
}
});
}
function testFirstResults(response){
if (response.indexOf("Submission Successful") != -1){
displayFormContent();
} else if (response.indexOf("Invalid E-mail") != -1){
//display error
} else if (response.indexOf("Nothing in Box") != -1){
//do nothing
} else {
//do nothing
}
}
// Overlay Effect Script for E-mail Submission Form
function displayFormContent(){
jQuery.fn.center = function () {
this.css("position", "absolute");
this.css("top", ( $(window).height() - this.height() ) / 2 + $(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2 + $(window).scrollLeft() + "px");
return this;
}
$('<div>',{ id : 'blackoverlay' }).insertBefore('#submissionform');
$("#submissionform").css("display", "block");
$("#submissionform").center();
return false;
}
first form markup:
HTML Code:
<form id="emailbox" name="form1" method="get" action="Scripts/emailtester.php" onsubmit="firstSubmitProcessor(this)">
<div>
<input type="text" name="email" id="go" value="your e-mail" onclick="input_focus(this)" onblur="input_reset(this)" maxlength="60"/>
<input type="submit" id="submit" value="Join" />
</div>
</form>
styles of #blackoverlay and the #submissionform div (second form):
Code:
#submissionform{
background:url("emailsubmission.gif") no-repeat scroll 50% 0 transparent;
width:360px;
height:280px;
position:absolute;
display:none;
top:500px;
right:460px;
z-index:9;
padding:60px 10px 0 45px;
text-align:left;
}
#blackoverlay{
display:block;
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
background-color:black;
z-index:8;
-moz-opacity: 0.8;
opacity:.80;
filter:alpha(opacity=80);
}
What is occurring right now is when I submit the form the page is redirected to a blank page that merely displays the response obtained from the PHP code (for example, if you entered a valid e-mail in the first form, you would see a blank page that says "Submission Successful" come up).
As I figured, I would not correctly modify the example script from your hibbard.eu site on my first attempt. I don't know that I've done what I need to do with the on submit event listener. I saw how there is an .addEventListener() JS function that I dabbled around with- maybe I need to get that in there as the HTML onsubmit attribute may not be accomplishing that.
You're probably able to point out some other shortcomings, however. I'm sure that the event listener is not the only issue with my code. :teach:
Second Attempt (Still Doesn't Work)
Hi Dave, and thanks for your reply. Great post.
I'm still not doing it right!!! :nono: :headbang:
I'm not using an array to pass data back and forth, my form method is set to "get", I'm not working on processing the second form (yet), among some other little nuances that differentiate my script from yours, but something is incorrect with what I tried.
Currently, when I submit the form, the page does nothing (no page refresh, no redirection, nothing). It does not matter if it is a valid submission or not.
Maybe someone knows what I have done incorrectly.
The JS file:
Code:
//this function is called by the AJAX method to handle the PHP script results
function testFirstResults(response){
if (response.indexOf("Submission Successful") != -1){
$('<div>',{ id : 'blackoverlay' }).insertBefore('#submissionform');
$("#submissionform").css("display", "block");
$("#submissionform").center();
} else if (response.indexOf("Invalid E-mail") != -1){
//display error
} else if (response.indexOf("Nothing in Box") != -1){
//do nothing
} else {
//do nothing
}
}
// Overlay Effect Script for E-mail Submission Form
jQuery.fn.center = function () {
this.css("position", "absolute");
this.css("top", ( $(window).height() - this.height() ) / 2 + $(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2 + $(window).scrollLeft() + "px");
return this;
}
$(document).ready(function(){
$("#emailbox").submit(function(e){
$.ajax({
type: $(this).attr('method'),
dataType: 'json',
cache: false,
url: "emailtester.php",
data: $(this).serialize(),
success: function(data){
testFirstResults(data);
}
});
e.preventDefault();
});
});
HTML Code:
HTML Code:
<form id="emailbox" name="form1" method="get" action="Scripts/emailtester.php">
<div>
<input type="text" name="email" id="go" value="your e-mail" onclick="input_focus(this)" onblur="input_reset(this)" maxlength="60"/>
<input type="submit" id="submit" value="Join" />
</div>
</form>
CSS styles:
Code:
#submissionform{
background:url("emailsubmission.gif") no-repeat scroll 50% 0 transparent;
width:360px;
height:280px;
position:absolute;
display:none;
top:500px;
right:460px;
z-index:9;
padding:60px 10px 0 45px;
text-align:left;
}
#blackoverlay{
display:block;
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
background-color:black;
z-index:8;
-moz-opacity: 0.8;
opacity:.80;
filter:alpha(opacity=80);
}
The PHP scripts:
PHP Code:
/* emailtester.php */
<?php
require_once('checkfirstsub.php');
$email = $_GET['email'];
if (!isset($email) || $email == "your e-mail")
echo '<p>Submission Failure - Nothing in Box: ' . $email . '</p>';
else {
$email = htmlentities($email);
$obj_PE = new ProcessEmail();
$messages = $obj_PE -> processor($email);
echo json_encode($messages);
}
?>
/* checkfirstsub.php */
<?php
class ProcessEmail
{
public function processor($email)
{
if (!empty($email)){
if ($email != "your e-mail"){
if ($this -> isItAValidEmail($email))
{
return '<p>Submission Successful</p>';
} else {
return '<p>Submission Failure- Invalid E-mail</p>';
}
} else {
return '<p>Submission Failure- Default Value in Box</p>';
}
} else {
return '<p>Submission Failure- Nothing in Box</p>';
}
}
public function isItAValidEmail($email)
{
if (filter_var($email, FILTER_VALIDATE_EMAIL))
return true;
else
return false;
}
}
?>
