E-mail Submission Box - Animating and Changing the HTML content on the client side

[etidd]

Hi all,

In another thread where another mentor and I have been discussing the responsive design for my website, I am now working on the sign up box at the bottom of the page.

The idea I have I should be able to describe without drawing an image to convey the concept. Once the user interacts with the e-mail submission box and submits a valid e-mail (I’ve already written the jQuery/PHP validation scripts - thx, fretburner, for your past help with that), the first e-mail box content within the .signupbox div would be replaced by the slightly longer confirmation submission form where I will attempt to collect scant bits of data like country, age range, etc. The .signupbox will have to expand in height to accommodate all of that form’s content. That div has no height set to it and has a total height of 300 px, which should be enough. I would like to animate the .signupbox height transitions as the user interacts with the form. After the second form has been successfully submitted, I envision that the second form content would “disappear” just like the first one did, making way for a “thank you, user@gmail.com, for signing up…”, and the .signupbox would shrink back to its original height.

There are a number of obstacles that I need to strategize for. Since .signupbox has no height value, what is an animation I can use to bring the transitions to light? Could I just “ease” the transitions like moving objects/tweening/etc? The other question is about the HTML markup. Should all the form markup be included in the DOM, or should J/S be used to dynamically insert new HTML content as the user goes along?

Thanks, Sitepoint. Look forward to discussing this soon.

-Tyler

edit: I am looking through the jQuery API, and I see a generic function, .animate(). Can I apply some sort of CSS, and would this work in some way?

[Paul_Wilkins]

How does the following look to you in regards to its functionality.
This uses the standard toggle method and the jQueryUI blind effect.

Animating and changing form contents through multiple submissions

The end of the script has a $.post simulation of an ajax post/response. Be sure to remove that if you want to use it for real.

[Paul_Wilkins]

I’ve made a few updates to include further details, such as a splash of color, and an intro above it to help explain things.

I’m quite pleased with how this three-stage animated form has turned out.

[etidd]

This is awesome, Paul. I am studying it carefully. I learned that you have demonstrated this as one form but divided into two fieldsets. You also used the following lines to animate the transition:

  $('.email').toggle('slow', function () {
$('.validated').show('slow', function () {
$('.further-details').toggle('blind', 2000);

So I have altered the form markup at my test page to re-create this. You can see the first state set up properly at the other test. It is at the bottom of the page. My form contains an AI honeypot and some other complexities that will require work in CSS to maintain the fluid layout in preparation this form for animation. For one thing, the second fieldset for further details needs to replace the spot where the first graphics are.

I will respond back as I progress further. I may have other questions as to how it works, but I think I’m able to understand somewhat.

Thanks!

[Paul_Wilkins]

Ahh yes thanks for mentioning that. I was earlier trying to use tricky techniques to have a single function use toggle to handle multiple things, but have since realised that using the standard show/hide is easier to understand.

[etidd]

Ah-ha! the CSS property of display:none; on the original e-mail form can be used to work nicely within my design. I’ll simply use the .css() to hide the original menu and display the other one (which I will try the .show() function). I’ll update when I try it soon enough.

[etidd]

Well, the CSS design has been completed for the design. You can see the test page at this link.

The following describes the basic structure:
-there are three divs- signupLeft, signupCenter, and signupRight. They don’t have heights set to them since the page is responsive.
-the inner wrapper contains all the content
-each sign up step is divided into its own div (signupstep1, signupstep2) for ease of toggling between display:none; and display:block;
-the main 2 steps have been divided into fieldsets, which has my JS .submit() function behaving improperly (should I make it 2 forms?)

When the user supplies valid info and signupstep2 is set to display:block (and signupstep1 to display:none;), what function can I use (or what CSS properties can I target with jQuery’s .css() function?) to obtain a smooth, animated transition of the box expanding and shrinking in height?

[etidd]

I’m going to try to use the .hide() and .show() methods like your example. It should be simple enough.

[etidd]

Well, I’ve not set this up correctly. It must be a newbie error because the page does nothing when I submit the first form.

Here is the emailbox.js script at presen (can’t make the new site format code correctly, by the way):

  //this is the function called by the success value of the first .ajax() call
  function testFirstResults(response){
    if (response.indexOf("Submission Successful") != -1){
      $("#signupstep1").css("display", "none");
      $("#signupstep2").show('slow');
    } else if (response.indexOf("Invalid E-mail") != -1){
      $("#invalidemail").fadeIn(700);
    }
  }
  
  function testSecondResults(data){
    if (data['validation'] == "pass"){
        $("#signupstep2").css("display", "none");
        $("#signupstep3").show('slow');
        $("#successfulsubmit h3").append("Submission Successful");        
        $("#emailbox input").each(function(){
          $(this).prop("disabled", "disabled");
        });
        $("#submit").val('Thanks!');
    } else {
        $("#errormessage").empty().append(data['message']);
    }
  }
  
  var mathAnswer = 0;
  var startTime = 0;
  var endTime = 0;
  var submissionTime;
  
  function generateEquation(){
      var num1 = Math.floor(Math.random() * 5) + 1;
    var num2 = Math.floor(Math.random() * 5) + 1;
    mathAnswer = num1 + num2;
    $("#math").append("What is " + num1 + " + " + num2 + "?");
  }
  
  $(document).ready(function(){
    
    generateEquation();
    
    $("#form1").submit(function(e){
      startTime = jQuery.now();
    
      e.preventDefault();
      $.ajax({
        type: $(this).attr('method'),
        dataType: 'html',
        cache: false,
        url: "Scripts/emailtester.php",
        data: $(this).serialize(),
        success: function(data){
          testFirstResults(data);
        }
      });
    });
    
    $("#submissionform").submit(function(e){
        var origEmail = $('#go').val();
        var confirmEmail = $("#confirmemail").val();
        var name = $("#name").val();
        var age = $("#age").val();
        var gender = $("#gender").val();
        var country = $("#country").val();
        var catcher = $("#aicatcher").val();
        var addition = $("#addition").val();
        endTime = jQuery.now();
        submissionTime = endTime - startTime;
        
        e.preventDefault();
    
        $.ajax({
          type: "POST",
          dataType: 'json',
          cache: false,
          url: "Scripts/confirmform.php",
          data: { 
              origEmail: origEmail,
              confirmEmail: confirmEmail,
              name: name,
              age: age,
              gender: gender,
              country: country,
              catcher: catcher,
              addition: addition,
              mathAnswer: mathAnswer,
              submissionTime: submissionTime 
          },
          success: function(data) {
            testSecondResults(data);
          },
        });
    });
    
    $("#cancel").click(function(){
        $("#blackoverlay").fadeOut(300);
        $("#errormessage").empty();
        $("#submissionform").fadeOut(300);
    });
  });

Note, this might have something to do with the line:
$(“#form1”).submit(function(e){

The form markup has the action call of:

              <form name="form1" id="form1" method="get" action="Scripts/emailtester.php">
                       <div>
                           <label for="go">Enter Your E&ndash;mail:</label>
                           <input id="go" type="text" name="email" value="your e-mail" maxlength="30">
                           <input id="submit" type="submit" value="Join">
                      </div>
              </form>

Note: a similar script for e-mail handling works as desired on my landing page design (see the bottom of the page).

Don’t know, but I’m sure it’s something simple that I did wrong. I can’t test my animated transitions as of yet because nothing is happening, and Firebug is not throwing any error messages.

EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.