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="example@domain.com"/>
</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>
答案 0 :(得分:0)
在这里使用一个非常基本的脚本:http://jsfiddle.net/RTfMM/。
更新:这将清除表单中的所有字段,并将其值替换为占位符文本。
$("#clear").click(function(){
$('#storyform input[type="text"]').val("");
});