etidd
February 27, 2013, 10:13pm
21
Thank you for that tutorial on your blog, Pullo. That’s really cool.
After installing Firebug, I tested to see what the response was from the .ajax() call.
Here’s what I received (a 404 not found).
http://localhost/emailtester.php?email=etidd88%40ymail.com&_=1362002677530 ** 404 Not Found
Object not found!
The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.
If you think this is a server error, please contact the webmaster.
The referring page would be localhost/index.html.
Does this mean it has a problem with my XAMPP installation? I don’t know what this means.
etidd
February 27, 2013, 10:34pm
22
Now, I’ve tried opening the index.html file from its actual location (C:/xampp/htdocs/index.html), and when I attempt to interact with the form there, I see no data appear in the console anywhere.
Hi there,
So we need to take a couple of steps back, because what is working for me, unfortunately seems not to be working for you.
At a minimum, what we are trying to do, relies on one HTML file to display the forms, some inline JavaScript and one PHP file (for the validation).
Can you post a complete, but stripped down version of your HTML file (including the JS in the source code), as well as the relevant part of the PHP file.
etidd
March 1, 2013, 4:38pm
24
You can see all the markup here , but here is a shortened version:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="Curious about a product before you buy it? Come here for reviews on today's hot products! Some of our categories include home business, dating, consumer electronics, and many others." />
<meta name="Keywords" content="product review site, review article database, World review group, product reviews online, product articles, online product and service reviews" />
<meta http-equiv="Content-Language" content="en" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="style/main.css" rel="stylesheet" type="text/css" media="screen,projection,tv" />
<link href="style/dropdownmenus.css" rel="stylesheet" type="text/css" media="screen" />
<title>World Review Group- Product Articles</title>
</head>
<body>
<!-- begin container -->
<div id="container">
<!-- begin middle div -->
<div id="middle">
<!--header with image -->
<h1>World Review Group<span></span></h1>
<div id="body">
<p id="welcomestatement">Hello everyone, <br />
This site is dedicated to consumer reviews on current products in many different markets. This site is here to promote the good ones and expose the bad ones. Thank you for visiting!</p>
<div id="wrapper">
<!-- DROP-DOWN MENUS -->
<!-- end wrapping div -->
</div>
<!-- end body div -->
<div id="footer"> </div>
<!-- end footer div -->
<h3 id="copytagatbottom">©WorldReviewGroup.com<br />
Updated Jan 14, 2013</h3>
</div><!-- end middle div -->
<!-- begin side windows -->
<div id="leftside">
<div id="leftsideend"> </div>
<div id="leftsidebody">
<h2 class="sideWindowHeaderText">Most Popular</h2>
<ul class="sideWindowLinks">
<li><a href="food/peapod1.html">Peapod</a></li>
<li><a href="health/dieting/southbeach1.html">South Beach Diet</a></li>
<li><a href="coupons/brandcaster1.html">Brandcaster Coupons</a></li>
</ul>
</div>
<div id="leftsidestart"> </div>
</div>
<!-- end leftside div -->
<!-- begin rightside div -->
<div id="rightside">
<div id="rightsidestart"> </div>
<div id="rightsidebody">
<h2 class="sideWindowHeaderText">Not Recommended</h2>
<ul class="sideWindowLinks">
<li><a href="#">Anthony Morrison's Big Profits Secret</a></li>
<li><a href="#">Mobile Mass Media</a></li>
<li><a href="#">Prorexin</a></li>
</ul>
<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)" maxlength="60"/>
<input type="submit" id="submit" value="Join" />
</div>
</form>
</div>
<div id="rightsideend"> </div>
</div><!-- end side windows -->
</div><!-- end container -->
<div id="submissionform">
<form name="form2" method="post" action="?">
<div>
<label for="confirmemail" class="fixedwidth">Confirm your e-mail:<span>*</span></label>
<input type="text" name="confirmemail" id="confirmemail" value="" maxlength="60" class="inputwidth"/>
</div>
<div>
<label for="name" class="fixedwidth">Enter your name:<span>*</span></label>
<input type="text" name="name" id="name" value="" maxlength="60" class="inputwidth"/>
</div>
<div>
<label for="age" class="fixedwidth">Select your age range:</label>
<select name="age" id="age" class="inputwidth">
<option selected="selected">18–35</option>
<option>36–55</option>
<option>55+</option>
<option>17 or younger</option>
</select>
</div>
<div>
<label for="country" class="fixedwidth">Select your country:<span>*</span></label>
<select name="country" id="country" class="inputwidth">
<option selected="selected">Select Country</option>
<option>United States</option>
<option>United Kingdom</option>
<option>Canada</option>
<option>Australia</option>
<option>Russia</option>
<option>Brazil</option>
<option>Somewhere else</option>
</select>
</div>
<p id="errormessage">You didn't enter the same e-mail address!</p>
<input type="submit" value="Sign Me Up!" class="formsubmitbutton" onclick="checkSubmission()" id="finalsubmit"/>
<input type="submit" value="Cancel" class="formsubmitbutton" onclick="backToHomePage()"/>
</form>
</div>
<div id="status"> </div>
<script type="text/javascript" src="Scripts/jQuery.js"></script>
<script type="text/javascript" src="Scripts/emailbox.js"></script>
</body>
</html>
I’m trying to work through all of these errors I see in Firebug and fully understand them.
Excellent, I’ll have a look at this later.#16 ?
etidd
March 1, 2013, 4:44pm
26
The location is in red in the ‘HTML’ section of Firebug, right below the doctype declaration.
<html xmlns="http://www.w3.org/1999/xhtml">
I just had a look at your site using FireBug and clicked on Console -> Errors.
Here I see the following:
"NetworkError: 404 Not Found - http://www.worldreviewgroup.com/Scripts/jQuery.js"
"NetworkError: 404 Not Found - http://www.worldreviewgroup.com/Scripts/jQuery.blockUI.js"
"NetworkError: 404 Not Found - http://www.worldreviewgroup.com/Scripts/jQuery.blockUI.js"
You are including jQuery in your page, aren’t you?
etidd
March 1, 2013, 11:49pm
28
jQuery is definitely there. It’s listed in a script tag at line #431 , at the bottom of the page.
When I click the script tab in Firebug, all I see is the jQuery file. I don’t see emailbox.js.
etidd
March 2, 2013, 12:14am
29
I didn’t have jQuery uploaded to the website- it’s there now, and I also don’t have the PHP scripts uploaded.
etidd
March 2, 2013, 1:01am
30
Maybe it won’t work unless I upload all the files to the live site? I think it’s safe to upload the PHP files now. I don’t know.
etidd
March 2, 2013, 1:12am
31
I also see these
Error: Permission denied to access property ‘toString’
slice.call( docElem.childNodes, 0 )[0].nodeType;
jQuery.js (line 3811)
Error: Permission denied to access property ‘toString’
I have absolutely no idea what these mean. :x
Hi etidd,
So, good news. It’s working.[LIST]]I’ve used the complete HTML from your page (see below). ]I copied the contents of Scripts/emailbox.js into the page, as I had to alter it ever so slightly and had no access to the file on your server. You can however, just alter your file and this will work.]I changed the position of the overlay to fixed, so that it doesn’t disappear when you scroll ]If you enter a valid email address, then the overlay will appear.working demo .
Here’s the code.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="Description" content="Curious about a product before you buy it? Come here for reviews on today's hot products! Some of our categories include home business, dating, consumer electronics, and many others."/>
<meta name="Keywords" content="product review site, review article database, World review group, product reviews online, product articles, online product and service reviews"/>
<meta http-equiv="Content-Language" content="en"/>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
<link href="http://www.worldreviewgroup.com/style/main.css" rel="stylesheet" type="text/css" media="screen,projection,tv"/>
<link href="http://www.worldreviewgroup.com/style/dropdownmenus.css" rel="stylesheet" type="text/css" media="screen"/>
<title>World Review Group- Product Articles</title>
<style>#blackoverlay{position:fixed;}</style>
</head>
<body>
<!-- begin container -->
<div id="container">
<!-- begin middle div -->
<div id="middle">
<!--header with image -->
<h1>World Review Group<span></span></h1>
<div id="body">
<p id="welcomestatement">
Hello everyone, <br/>
This site is dedicated to consumer reviews on current products in many different markets. This site is here to promote the good ones and expose the bad ones. Thank you for visiting!
</p>
<div id="wrapper">
<!-- begin Personal navigation menu -->
<ul id="pMenu">
<li><a href="health.html" title="Health Page">health</a>
<!-- begin health -->
<div id="health">
<!-- weight loss -->
<h2>weight loss & wellness</h2>
<!-- fitness -->
<h3><span>fitness</span></h3>
<ul>
<li><a href="health/fitness/weiderpowerbell1.html">Weider PowerBell</a></li>
<li><a href="health/fitness/brazilbuttlift1.html">Brazil Butt Lift</a></li>
<li><a href="health/fitness/georgesstpierre1.html">MMA Training with Georges St. Pierre</a></li>
<li><a href="health/fitness/turbofire1.html">TurboFire Fitness</a></li>
</ul>
<!-- dieting -->
<h3><span>dieting</span></h3>
<ul>
<li><a href="health/dieting/healthetrimdiet1.html">Healthé Trim Diet</a></li>
<li><a href="health/dieting/southbeach1.html">South Beach Diet</a></li>
</ul>
<!-- supplements -->
<h2>supplements</h2>
<ul>
<li><a href="health/Rx/nutrilitevitamins1.html">Nutrilite Multivitamins</a></li>
<li><a href="health/Rx/dochangover1.html">Doc Hangover Cure</a></li>
<li><a href="health/Rx/libigrow1.html">Libigrow</a></li>
<li><a href="health/Rx/smokedeter1.html">Smoke Deter</a></li>
<li><a href="health/Rx/prorexin1.html">Prorexin</a></li>
</ul>
<!-- skin care -->
<h2>skin care</h2>
<ul>
<li><a href="health/skincare/shivaacne1.html">Shiva23 Acne Cream</a></li>
<li><a href="health/skincare/deadseamineral1.html">Dead Sea Mineral Cellulite Treatment</a></li>
</ul>
</div>
<!-- end health -->
</li>
<li><a href="insurance.html" title="Insurance Page">insurance</a>
<!-- begin insurance -->
<div id="insurance">
<!-- property insurance -->
<h2><a href="insurance/propertyinsurance1.html">home⁄property insurance</a></h2>
<ul>
<li><a href="insurance/usinsurancepropertyreview1.html">USInsuranceOnline.com – Property</a></li>
</ul>
<!-- auto insurance -->
<h2><a href="insurance/autoinsurance1.html">auto insurance</a></h2>
<ul>
<li><a href="insurance/bestquotesautoreview1.html">BestQuotes.com</a></li>
<li><a href="insurance/insuremycar4lessreview1.html">InsureMyCar4Less</a></li>
<li><a href="insurance/lowermycarinsuranceratereview1.html">Lower My Car Insurance Rate</a></li>
<li><a href="insurance/atlascarinsurancereview1.html">Atlas Car Insurance</a></li>
<li><a href="insurance/insurancecomparisonreview1.html">Insurance Comparison</a></li>
</ul>
<!-- health insurance -->
<h2><a href="insurance/healthinsurance1.html">health insurance</a></h2>
<ul>
<li><a href="insurance/betterhealthquotereview1.html">Better Health Quote</a></li>
<li><a href="insurance/healthinsurancesourcesreview1.html">Health Insurance Sources</a></li>
<li><a href="insurance/americanhealthcarecenterreview1.html">American Health Care Center Review</a></li>
<li><a href="insurance/bestquoteshealthreview1.html">BestQuotes.com – Health</a></li>
</ul>
<!-- life insurance -->
<h2><a href="insurance/lifeinsurance1.html">life insurance</a></h2>
<ul>
<li><a href="insurance/americaninsurancereview1.html">American Insurance</a></li>
<li><a href="insurance/usinsurancelife1.html">USInsuranceOnline.com – Life</a></li>
</ul>
</div>
<!-- end insurance -->
</li>
<li><a href="general.html" title="General Page">general</a>
<!-- begin general -->
<div id="general">
<!-- electronics -->
<h2>electronics</h2>
<!-- gaming -->
<h3><span>gaming</span></h3>
<ul>
<li><a href="gaming/haltgamereview1.html">Halt Game</a></li>
<li><a href="gaming/battlestargalactica1.html">Battlestar Galactica</a></li>
<li><a href="gaming/gsn1.html">GSN Gaming</a></li>
</ul>
<!-- electronic gadgets -->
<h3><span>electronic gadgets</span></h3>
<ul>
<li><a href="electronics/kindle1.html">Kindle e–Reader</a></li>
<li><a href="electronics/ecig1.html">Electronic Cigarettes</a></li>
</ul>
<!-- style and fashion -->
<h2>style & fashion</h2>
<!-- makeup -->
<h3><span>makeup</span></h3>
<ul>
<li><a href="makeup/dinair1.html">Dinair Airbrush Makeup</a></li>
<li><a href="makeup/simplykaren1.html">Simply Karen</a></li>
</ul>
<!-- food/dining -->
<h2>food⁄dining</h2>
<!-- net grocers -->
<h3><span>net grocers</span></h3>
<ul>
<li><a href="food/efooddepot1.html">eFood Depot</a></li>
<li><a href="food/peapod1.html">Peapod</a></li>
</ul>
<!-- coupons -->
<h3><span>coupons</span></h3>
<ul>
<li><a href="coupons/brandcaster1.html">Brandcaster Coupons</a></li>
</ul>
<!-- cars/auto -->
<h2>cars⁄auto</h2>
<ul>
<li><a href="auto/carfax1.html">Carfax Vehicle History Reports</a></li>
<li><a href="auto/carprices1.html">CarPrices.com</a></li>
</ul>
<!-- security -->
<h2>security</h2>
<ul>
<li><a href="security/adtalarm1.html">ADT Alarm System</a></li>
</ul>
<!-- hobby -->
<h2>hobby</h2>
<!-- music -->
<h3><span>music</span></h3>
<ul>
<li><a href="music/guitartricksreview1.html">GuitarTricks</a></li>
<li><a href="music/jamoramareview1.html">Jamorama– Learn Guitar</a></li>
</ul>
</div>
<!-- end general -->
</li>
<li><a href="dating.html" title="Dating Page">dating</a>
<!-- begin dating -->
<div id="dating">
<!-- dating sites -->
<h2>dating sites</h2>
<ul>
<li><a href="dating/realmaturesingles1.html">RealMatureSingles</a></li>
<li><a href="dating/seniorpeoplemeet1.html">SeniorPeopleMeet</a></li>
<li><a href="dating/adultfriendfinder1.html">Adult Friend Finder</a></li>
<li><a href="dating/benaughty1.html">BeNaughty.com</a></li>
<li><a href="dating/untrue1.html">Untrue.com</a></li>
<li><a href="dating/elitemate1.html">EliteMate</a></li>
<li><a href="dating/pridedating1.html">Pride Dating (gay)</a></li>
<li><a href="dating/speeddate1.html">SpeedDate.com</a></li>
</ul>
<!-- books and advice -->
<h2>books & advice</h2>
<ul>
<li><a href="dating/askapril1.html">Ask April</a></li>
<li><a href="dating/bounceback1.html">Bounce Back to Dating Formula</a></li>
<li><a href="dating/datingsecrets1.html">Dating Secrets</a></li>
</ul>
</div>
<!-- end dating -->
</li>
<li><a href="education.html" title="Education Page">education</a>
<!-- begin education -->
<div id="education">
<ul>
<li><a href="education/scholzone1.html">Scholarship Zone</a></li>
<li><a href="education/speedstudytechniques1.html">Speed Study Techniques</a></li>
<li><a href="education/stimulusgrants1.html">Stimulus Grants</a></li>
<li><a href="education/teachmetoday1.html">Teach Me Today</a></li>
<li><a href="education/winningsurveys1.html">Winning Surveys</a></li>
<li><a href="education/basicskillsassessments1.html">Basic Skills Assessments</a></li>
</ul>
</div>
<!-- end education -->
</li>
<li><a href="legal.html" title="Legal Page">legal</a>
<!-- begin personal legal -->
<div id="pLegal">
<ul>
<li><a href="debt/urgenthomerelief1.html">Urgent Home Relief</a></li>
</ul>
<!-- mortgage -->
<h2>mortgage</h2>
<ul>
<li><a href="mortgage/foreclosurefighter1.html">Home Foreclosure Fighter</a></li>
<li><a href="mortgage/fastcash4homes1.html">Fast Cash 4 Homes</a></li>
</ul>
<!-- debt -->
<h2>debt</h2>
<!-- bankruptcy -->
<h3><span><a href="legal/bankruptcy1.html">bankruptcy</a></span></h3>
<ul>
<li><a href="debt/evalbankruptcy1.html">Bankruptcy Lawyer Finder</a></li>
<li><a href="legal/bankruptcy1.html">Bankruptcy Attorney Finder</a></li>
</ul>
<!-- credit debt -->
<h3><span><a href="legal/creditdebt1.html">credit debt</a></span></h3>
<ul>
<li><a href="debt/debtnegotiator1.html">Debt Negotiator</a></li>
</ul>
<!-- divorce -->
<h2>divorce</h2>
<ul>
<li><a href="legal/divorcedocuments1.html">Divorce Documents</a></li>
</ul>
<!-- defense attorney -->
<h2>defense attorney</h2>
<ul>
<li><a href="legal/DUIattorney1.html">DUI Attorney</a></li>
</ul>
<!-- will creation -->
<h2>will creation</h2>
<ul>
<li><a href="legal/willcreation1.html">Create My Will</a></li>
</ul>
</div>
<!-- end personal legal -->
</li>
</ul>
<!-- end Personal navigation menu-->
<!-- begin Business navigation menu-->
<ul id="bMenu">
<li><a href="startyourownbusiness.html" title="Business Opportunities Page">business opportunities</a>
<!-- business opportunities -->
<div id="bizopps">
<ul>
<li><a href="bizopps/mobilemassmoney1.html">Mobile Mass Money</a></li>
<li><a href="bizopps/autopilothomeprofits.html">Autopilot Home Profits</a></li>
<li><a href="bizopps/anthonymorrison1.html">Anthony Morrison's Big Profits Secret</a></li>
</ul>
<!-- home business scams -->
<h2>home business scams</h2>
<ul>
<li><a href="bizopps/medicalbillinghomebusiness1.html">The Medical Billing Home Business Bible</a></li>
</ul>
<!-- medical -->
<h2>medical</h2>
<ul>
<li><a href="bizopps/freesitesignup1.html">Cash–Pulling Affiliate Marketing Websites</a></li>
<li><a href="bizopps/biggerbloggingprofitsreview1.html">Bigger Blogging Profits</a></li>
</ul>
<!-- affiliate marketing -->
<h2>affiliate marketing</h2>
<ul>
<li><a href="bizopps/milliondollarpips1.html">Pips Forex Trading Robot</a></li>
<li><a href="bizopps/pennystockprophet1.html">The Penny Stock Prophet</a></li>
</ul>
<!-- trading/investing -->
<h2>trading⁄investing</h2>
<ul>
<li><a href="bizopps/swagbucks1.html">Swag Bucks</a></li>
<li><a href="bizopps/corsentialsurvey1.html">Corsential</a></li>
</ul>
<h2><a href="bizopps/makemoneywithsurveys1.html">surveys</a></h2>
<ul>
<li><a href="bizopps/thepeoplesprogram1.html">The People's Program</a></li>
</ul>
</div>
<!-- end business opportunities -->
</li>
<li><a href="businessservices.html" title="Business Services Page">business services</a>
<!-- business services -->
<div id="bizservices">
<ul>
<li><a href="bizopps/lessthantruckloadshipping1.html">Top Flight Concepts</a></li>
</ul>
<!-- shipping solutions -->
<h2>shipping solutions</h2>
<ul>
<li><a href="telecommasterquoteagency1.html">Telecom Master Quote Agency</a></li>
</ul>
<!-- technology solutions -->
<h2>technology solutions</h2>
<ul>
<li><a href="bizservices/projmgmttemplates1.html">Project Management Templates</a></li>
</ul>
<!-- project management -->
<h2>project management</h2>
</div>
<!-- end business services -->
</li>
<li><a href="legal.html" title="Legal Services Page">legal services</a>
<!-- begin business legal -->
<div id="bLegal">
<ul>
<li><a href="legal/willcreation1.html">Create My Will</a></li>
</ul>
<!-- will creation -->
<h2>will creation</h2>
<ul>
<li><a href="legal/DUIattorney1.html">DUI Attorney</a></li>
</ul>
<!-- defense attorney -->
<h2>defense attorney</h2>
<ul>
<li><a href="legal/divorcedocuments1.html">Divorce Documents</a></li>
</ul>
<!-- divorce -->
<h2>divorce</h2>
<ul>
<li><a href="debt/debtnegotiator1.html">Debt Negotiator</a></li>
</ul>
<!-- credit debt -->
<h3><span><a href="legal/creditdebt1.html">credit debt</a></span></h3>
<ul>
<li><a href="debt/evalbankruptcy1.html">Bankruptcy Lawyer Finder</a></li>
<li><a href="legal/bankruptcy1.html">Bankruptcy Attorney Finder</a></li>
</ul>
<!-- bankruptcy -->
<h3><span><a href="legal/bankruptcy1.html">bankruptcy</a></span></h3>
<!-- debt -->
<h2>debt</h2>
<ul>
<li><a href="mortgage/foreclosurefighter1.html">Home Foreclosure Fighter</a></li>
<li><a href="mortgage/fastcash4homes1.html">Fast Cash 4 Homes</a></li>
</ul>
<!-- mortgage -->
<h2>mortgage</h2>
<ul>
<li><a href="debt/urgenthomerelief1.html">Urgent Home Relief</a></li>
</ul>
</div>
<!-- end business legal -->
</li>
</ul>
<!-- end Business navigation menu-->
</div>
<!-- end wrapping div -->
</div>
<!-- end body div -->
<div id="footer">
</div>
<!-- end footer div -->
<h3 id="copytagatbottom">©WorldReviewGroup.com<br/>
Updated Jan 14, 2013</h3>
</div>
<!-- end middle div -->
<!-- begin side windows -->
<div id="leftside">
<div id="leftsideend">
</div>
<div id="leftsidebody">
<h2 class="sideWindowHeaderText">Most Popular</h2>
<ul class="sideWindowLinks">
<li><a href="food/peapod1.html">Peapod</a></li>
<li><a href="health/dieting/southbeach1.html">South Beach Diet</a></li>
<li><a href="coupons/brandcaster1.html">Brandcaster Coupons</a></li>
</ul>
</div>
<div id="leftsidestart">
</div>
</div>
<!-- end leftside div -->
<!-- begin rightside div -->
<div id="rightside">
<div id="rightsidestart">
</div>
<div id="rightsidebody">
<h2 class="sideWindowHeaderText">Not Recommended</h2>
<ul class="sideWindowLinks">
<li><a href="#">Anthony Morrison's Big Profits Secret</a></li>
<li><a href="#">Mobile Mass Media</a></li>
<li><a href="#">Prorexin</a></li>
</ul>
<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)" maxlength="60"/>
<input type="submit" id="submit" value="Join"/>
</div>
</form>
</div>
<div id="rightsideend">
</div>
</div>
<!-- end side windows -->
</div>
<!-- end container -->
<div id="submissionform">
<form name="form2" method="post" action="">
<div>
<label for="confirmemail" class="fixedwidth">Confirm your e-mail:<span>*</span></label>
<input type="text" name="confirmemail" id="confirmemail" value="" maxlength="60" class="inputwidth"/>
</div>
<div>
<label for="name" class="fixedwidth">Enter your name:<span>*</span></label>
<input type="text" name="name" id="name" value="" maxlength="60" class="inputwidth"/>
</div>
<div>
<label for="age" class="fixedwidth">Select your age range:</label>
<select name="age" id="age" class="inputwidth">
<option selected="selected">18–35</option>
<option>36–55</option>
<option>55+</option>
<option>17 or younger</option>
</select>
</div>
<div>
<label for="country" class="fixedwidth">Select your country:<span>*</span></label>
<select name="country" id="country" class="inputwidth">
<option selected="selected">Select Country</option>
<option>United States</option>
<option>United Kingdom</option>
<option>Canada</option>
<option>Australia</option>
<option>Russia</option>
<option>Brazil</option>
<option>Somewhere else</option>
</select>
</div>
<p id="errormessage">
You didn't enter the same e-mail address!
</p>
<input type="submit" value="Sign Me Up!" class="formsubmitbutton" onclick="checkSubmission()" id="finalsubmit"/>
<input type="submit" value="Cancel" class="formsubmitbutton" onclick="backToHomePage()"/>
</form>
</div>
<div id="status">
</div>
<script type="text/javascript" src="http://www.worldreviewgroup.com/Scripts/jQuery.js"></script>
<!--<script type="text/javascript" src="http://www.worldreviewgroup.com/Scripts/emailbox.js"></script> -->
<script>
function input_focus(obj){
if ( obj.value == obj.defaultValue ){
obj.value = "";
}
}
function input_reset(obj){
if (obj.length == 0){
obj.value = obj.defaultValue;
}
}
//this is the function called by the success value of the .ajax call
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){
alert("Invalid mail");
} 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){
e.preventDefault();
$.ajax({
type: $(this).attr('method'),
dataType: 'html',
cache: false,
url: "emailtester.php",
data: $(this).serialize(),
success: function(data){
testFirstResults(data);
}
});
});
});
</script>
</body>
</html>
emailtester.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;
}
}
}
//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 $messages;
}
?>
etidd
March 2, 2013, 6:54pm
33
Yes, I see that it does work on your domain.
For some reason, it doesn’t work on my local server.#submissionform to just after the wrapping div at line #351 , as well some other CSS styles.
Here’s what some of them are:
#submissionform{
background:url("emailsubmission.gif") no-repeat scroll 50% 0 transparent;
width:330px;
height:220px;
position:absolute;
display:none;
top:300px;
left:130px;
z-index:9;
padding:60px 10px 0 20px;
text-align:left;
}
#blackoverlay{
display:block;
position:fixed;
top:0%;
left:0%;
width:100%;
height:100%;
min-width:1171px;
min-height:1010px;
background-color:black;
z-index:1;
-moz-opacity: 0.8;
opacity:.80;
filter:alpha(opacity=80);
}
Our conversation on these changes that stabilizes the position of #submissionform across browsers in different widths is over here .
I changed my PHP file up the way you had it into one file, and I put the JS code at the bottom of the page.
Maybe the testing server is not working / not set up in some way correctly because I’m still seeing a Network Error 404 File Not Found; however, it seems to have worked in an ajax loop before, only without the black overlay.
Man, that is weird.
However, there are two things going on here.
JS / PHP
CSS
We need to sort out 1. before we can sort out 2.
What I recommend is that you copy my example as is.http://localhost/lightbox_ajax/index.html and see if it works.
If it doesn’t, this is beginning to point to something on your setup not being correct.
Let me know how you get on. I’ll be online for another hour or so.
etidd
March 2, 2013, 7:12pm
35
The script gave me a 404 Not Found error using all the files & all CSS styles in your example as-is in a new folder inside htdocs named lightbox_ajax. Something must not be right with the way I set up XAMPP.
OK, might not seem like it, but we might be getting somewhere.
You should have two files.
Where on your PC are these files stored?
etidd
March 2, 2013, 7:24pm
37
Yeah, I have those two files. PHP is saved as emailtester.php.
I also have index.html the way you posted, and I transferred the rest of the site files into the new directory.
They are stored in C:/xampp/htdocs/lightbox_ajax/(site files) . Apache is the only module enabled in XAMPP for this script.
This shouldn’t make a difference, as in my index.html I am referencing the files on your www server.
So, with Apache running, and the index file stored at C:/xampp/htdocs/lightbox_ajax/index.html, what happens if you go to localhost/lightbox_ajax/
Is that where you getting the 404 error?
etidd
March 2, 2013, 7:42pm
39
I can direct my browser to localhost/lightbox_ajax/ or localhost/lightbox_ajax/index.html , but when I click on the submit button with a valid e-mail in the input, that’s when I receive the 404 Error, more precisely
“NetworkError: 404 Not Found - http://localhost/lightbox_ajax/emailtester.php?email=etidd88%40ymail.com&_=1362253146175 ”
Sorry if you’ve already told me this, but where do you see the error.