Trying to Enable Insertion of Black Overlay Div on Successful e-mail submission

Trying to Enable Insertion of Black Overlay Div on Successful e-mail submission

Hello everyone,

I have a question that pertains to inserting a div that disables all the elements inside the body of the page and has an opaque black overlay while displaying a 2nd confirmation form on top of it. I have placed the second form outside of the page's container div.

The jQuery involved starts with a .submit() event listener which fires off an .ajax request to a PHP script that tests the user's submission and removes any harmful hijacking code (I believe this may be where the jQuery is failing).

The current behavior is when the submission is entered, the page stays in one place and displays no change whatsoever, no matter if the submission was valid or not.

Here is my current JavaScript / jQuery:
  1. $(document).ready(function(){
            $("#emailbox").submit(function(e){

            $.ajax({
                type: $(this).attr('method'),
                dataType: 'html',
                cache: false,
                url: "emailtester.php",
                data: $(this).serialize(),
                success: function(data){
                  testFirstResults(data);
                }
            });
              e.preventDefault();
         });
    });














  2. //this is the function called by the success value of the .ajax call
    function testFirstResults(response){
        console.log(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
        }
    }













  3. // 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;
    }





The form markup on my site:
  1. <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">&nbsp;</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&ndash;35</option>
             <option>36&ndash;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&apos;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">&nbsp;</div>
    <script type="text/javascript" src="Scripts/jQuery.js"></script>
    <script type="text/javascript" src="Scripts/emailbox.js"></script>
    </body>
    </html>




















































& finally, the CSS styles involving this:
  1. /* the 2nd form's styles */

  2. #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;
    }










  3. /* the overlay's styles */
  4. #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 website that I'm working on is World Review Group if you'd like to see the rest of the page markup/styles











    • Topic Participants

    • tyler