Question

    The form and script are show below and I appreciate all help on this.




            $(document).ready(function(){


        function displayStory()
            {
                $('#target').toggle();
                createStory();
                //$('#create button[type="submit"]').val();

            }
            function hideStory()
            {
                $('#target').hide();

                $('#storyform input[type="text"]').val("");
                //$( "#storyform" ).resetForm();

            }

        $("#clear").click(hideStory);
        $("#create").click(displayStory);

            function createStory(){


                var userName = $("#name").val();

                var strColor = $("#color").val();

                var strAnimal = $("#animal").val();

                var strLocation = $("#location").val();

                var strFood = $("#food").val();

                var strSnacks = $("#snacks").val();


                var strSound = $("#sound").val();



                var strEmail = $("#email").val();



                var strZipCode = $("#zip").val();


                var txt1=new String("Hello, my name is " + userName + ".  My favorite color is " + strColor + ". My most cherished animal " + strAnimal + " gave me great joy. It may interest you to know that " + strAnimal + " can survive in many places including " + strLocation + "  ");
                var txt2=new String("My favorite food is " + strFood + " and I just can not get enough of it.  I can have as many as " + strSnacks + " portion(s) for snacks everyday. A sound I love is " + strSound + " and you should really hear it.  ");
                var txt3=new String("I can honestly say that my favorite email address is " + strEmail + " and I would suggest that you write to them.  If I was to pick a state that I love to live in, I would have to say one with a zip code of " + strZipCode + " would be that State.  ");


                return $("#story").html(txt1 +" "+ txt2 +" "+ txt3);

            }



        $.validator.setDefaults({
        submitHandler: function() { alert("submitted!"); },
        highlight: function(input) {
            $(input).addClass("ui-state-highlight");
        },
        unhighlight: function(input) {
            $(input).removeClass("ui-state-highlight");
        }
    });


    $().ready(function() {


        // validate story form on keyup and submit
        $("#storyform").validate({

               rules: {
            name:   { required: true },
            color:  { required: true,
                      minlength: 3 },
            location:  { required: true },
            animal: { required: true },
            food:   { required: true },
            sound:  { required: true },
            snacks:  { required: true, 
                      digits:   true,
                      minlength: 2, 
                      maxlength: 2 },
            email:  { required: true, 
                      email:    true },
            zip:    { required: true, 
                      digits:   true, 
                      minlength: 5, 
                      maxlength: 5 }
        },

        // messages
        messages: {
            name:   { required:  "Your name is required" },
            color:  { required:  "Color name is required",
                      minlength: "Must be at least 3 characters" },
            location:  { required:  "Location is required" },
            animal: { required:  "Animal is required" },
            food:   { required:  "Food is required" },
            sound:  { required:  "Sound is required" },
            snacks:  { required:  "Snack is required", 
                      digits:    "Must be a number",
                      minlength: "Must be 2 characters", 
                      maxlength: "Must be 2 characters" },
            email:  { required:  "Valid email address is required", 
                      email:     "Must be an email address" },
            zip:    { required:  "Zip Code is required", 
                      digits:    "Must be a number", 
                      minlength: "Must be 5 characters", 
                      maxlength: "Must be 5 characters" }
        },

        });

        });


    });


            <form class="cmxform" id="storyform" method="get" action="">

<fieldset>
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="First and last name" class="required"  autofocus/>
</fieldset>

<fieldset>
<label for="color">Color</label>
<input id="color" name="color" type="text" placeholder="enter a color" class="required"/>
</fieldset>

<fieldset>
<label for="location">Location</label>
<input id="location" name="location" type="text" placeholder="name a location"/>
</fieldset>

<fieldset>
<label for="animal">Animal</label>
<input id="animal" name="animal" type="text" placeholder="name an animal"/>
</fieldset>

<fieldset>
<label for="food">Food</label>
<input id="food" name="food" type="text" placeholder="name a food"/>
</fieldset>

<fieldset>
<label for="sound">Sound</label>
<input id="sound" name="sound" type="text" placeholder="name a sound"/>
</fieldset>

<fieldset>
<label for="snacks">Number of Snacks</label>
<input id="snacks" name="snacks" type="number" placeholder="# of snacks"/>
</fieldset>

<fieldset>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="[e-mail]"/>
</fieldset>

<fieldset>
<label for="zip">Zip Code</label>
<input id="zip" name="zip" type="number" placeholder="5 digit zip code"/>
</fieldset>

 <div>

 <p id="target"><br/><br/>

<label for="story"><strong>Here's Your Story</strong></label><br/>
<textarea id="story" name="story" rows="3"></textarea>
</p>
</div>

<fieldset>
<button id="create"class="submit" type="submit" onclick="displayStory()" value="Create">Create</button>
<button id="clear"class="reset" type="submit" onclick="hideStory()" value="Clear"/>Clear</button>
</fieldset>


</form>

                });
            </script>

Answer 1

Got it working here with a pretty basic script: http://jsfiddle.net/RTfMM/.

Update: This will clear out all the fields within the form and replace their values with the placeholder text.

$("#clear").click(function(){
    $('#storyform input[type="text"]').val("");
  });